Есть компонент Posts.jsx который содержит в себе Search.jsx, проблема в том, что я не знаю как правильно сделать компонент Search - должен ли он быть функциональный или через класс. И как передавать значения с input при нажатии на кнопку search в Posts компонент.
Posts.jsx
import React from 'react';
import { CardList } from '../../components/card-list/card-list.component';
import { Search } from '../../components/search/search.component';
import postApi from '../../services/postApi';
class PostsListPage extends React.Component {
constructor() {
super();
this.state = {
posts: [],
search: '',
};
}
componentDidMount() {
postApi.getPosts().then(({ data }) => {
this.setState({ posts: data.list });
});
}
render() {
const { posts, search } = this.state;
return (
<div className="container">
<Search placeholder="Search post" />
<CardList posts={posts} />
</div>
);
}
}
export default PostsListPage;
Search.jsx
import React from 'react';
export const Search = ({ placeholder, handleClick }) => (
<div className="mb-3 d-flex">
<input type="text" className="form-control" name="search" placeholder={placeholder} />
<button type="button" className="btn btn-primary" onClick={handleClick}>
Search
</button>
</div>
);