Как сделать фильтрацию постов на React?

Question

[Владислав]

Имеется форма, в которой пользователь должен вбивать информацию, эта форма при каждом своём изменении передаёт данные вверх по иерархии, как сделать так, чтобы при изменении формы фильтровались посты на странице?

Home.jsx(Компонент, который стоит выше по иерархии)

Code #1

import React, {Component} from 'react';

import db from '../db';

import Nav from '../components/Nav';
import Header from '../components/Header';
import SearchBar from '../components/SearchBar';
import Posts from '../components/Posts';
import Footer from '../components/Footer';

export default class Home extends Component{
    constructor(props){
        super(props);
        this.handleUserInput = this.handleUserInput.bind(this);
        this.state = {
            filterText: ''
          };
    }
  handleUserInput(filterText) {
    this.setState({filterText: filterText}, ()=>{console.log("State: " + this.state.filterText)});
  }
    render(){
    return(
        <div className="App">
            <Nav/>
            <Header/>
            <SearchBar
                filterText={this.state.filterText}
                onUserInput={this.handleUserInput}/>
            <Posts handleUserIput={this.state.filterText} data={db}/>
            <Footer/>
        </div>
    );
}
}

SearchBar.jsx(компонент с формой)

Code #2

import React, {Component} from 'react';

export default class SearchBar extends Component{
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);

    }
    handleChange(){
        this.props.onUserInput(
            this.filterTextInput.value,
        );
    }
    render(){
        return(
            <div className="searchbar">
                <div id="search-box">
                    <input 
                    id="term" 
                    type="text" 
                    placeholder="Search..." 
                    value={this.props.filterText} 
                    ref={(input) => this.filterTextInput = input}
                    onChange={this.handleChange}/>

                    <label className="screen-reader" htmlFor="term"><i className="fa fa-search"></i></label>
                </div>
            </div>
        );
}
}

Posts.jsx(компонент, в котором нужно фильтровать посты)

Code #3

import React, {Component} from 'react';

import Post from './Post';

export default class Posts extends Component{
    render(){
        return(
            <section className="s-posts">
                <div className="container">
                    <div className="row">
                        {
                            this.props.data.map(data =>
                                <Post key={data.id} title={data.title} img={data.img}  descr={data.descr}/>
                        )
                        }
                    </div>
                </div>
            </section>
        );
    }
}

Answer 1

[0xD34F]

Список постов - это db, да? Ну так и фильтруйте его перед передачей в Posts. Например, так:

render() {
  const
    text = this.state.filterText,
    posts = text ? db.filter(n => n.descr.includes(text)) : db;

  return(
    <div className="App">
      <Nav/>
      <Header/>
      <SearchBar
        filterText={this.state.filterText}
        onUserInput={this.handleUserInput}
      />
      <Posts handleUserIput={this.state.filterText} data={posts}/>
      <Footer/>
    </div>
  );
}

Comments

[Владислав]

Спасибо!

Answer 2

[Виталий]

видимо не готов ты еще раз не можешь такое тестовое задание решить
у тебя есть серч компонент и колбек который идет от ончендж меняет стейт который передается как в серч так и в постс, тебе надо просто использовать правила фильтрации в постс

{
                            !this.handleUserIput ? this.props.data.map(data =>
                                <Post key={data.id} title={data.title} img={data.img}  descr={data.descr}/>
                        ) : 
                         this.props.data.filter(data=>data.title===this.handleUserIput).map(data =>
                                <Post key={data.id} title={data.title} img={data.img}  descr={data.descr}/>
                        )}

чет типо такого

Comments

[Владислав]

Я сделал по-другому, как было в документации во вкладке "Thinking in React", но не сработало, спасибо, понял в чем проблема, отпишу, если что-то опять пойдет не так)