Есть родительский компонент List.js в котором на хуке componentDidMount я получаю категории которые буду использовать в этом компонете и которые хочу использовать в дочернем AddPostForm.js. В компоненте AddPostForm у меня в стейте есть title, body - это два inputs а category относиться к select тегу и когда в этом селекте выбераеться option то он присваиваеться к category. Проблема что при инициализации компонента AddPostForm мне нужно установить дефолтное значение в категории (взять первый элемент с this.props.categories[0].name). Как это можно сделать правильно?
AddPostForm.js
import React from 'react';
import postApi from '../../services/postApi';
class AddPostForm extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: '',
category: ''
};
}
handleInputChange = event => {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]: value
});
};
formSubmit = async event => {
event.preventDefault();
const { status, data } = await postApi.addPost({
title: this.state.title,
body: this.state.body,
category: this.state.category,
});
if (status === 200) {
this.setState({
title: '',
body: '',
category: this.props.categories[0].name
});
this.props.addPost(data);
}
};
render() {
return (
<form onSubmit={this.formSubmit} className="mb-3">
<div className="form-group">
<input type="text" name="title" className="form-control" value={this.state.title} onChange={this.handleInputChange} />
</div>
<div className="form-group">
<textarea name="body" className="form-control" value={this.state.body} onChange={this.handleInputChange} />
</div>
<div className="form-group">
<select className="form-control" name="category" value={this.state.category} onChange={this.handleInputChange}>
{this.props.categories.map(item => (
<option key={item._id}>{item.name}</option>
))}
</select>
</div>
<button className="btn btn-primary">Add</button>
</form>
);
}
}
export default AddPostForm;
List.js
import React from 'react';
import categoryApi from '../../services/categoryApi';
import AddPostForm from './AddPostForm';
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [],
categories: [],
};
}
componentDidMount() {
categoryApi.getCategories().then(response => {
if (response.data.length) {
this.setState({
categories: response.data
});
}
});
}
addPost = async post => {
this.setState(prevState => ({
posts: [...prevState.posts, post],
}));
};
render() {
return (
<div className="shadow p-3 mt-4">
<AddPostForm categories={this.state.categories} addPost={this.addPost} />
</div>
);
}
}
export default List;