Search over json object (react)

Question

I am trying to have a search bar which updates the set of json entries depending upon query. Here's the code that displays the video list (<Videos videos={this.state.data}/>). When the page loads, I want to call <Videos videos={this.state.data}/>, but after this query from search bar should update this list. My search functionality is not working for some reason.

class App extends Component {
  state = {
    query: "",
    data: [],
    filteredData: []
  };

  handleInputChange = event => {
    const query = event.target.value;

    this.setState(prevState => {
      const filteredData = prevState.data.filter(element => {
        return element.title.toLowerCase().includes(query.toLowerCase());
      });

      return {
        query,
        filteredData
      };
    });
  };

  getData = () => {
    fetch('http://localhost:3000/api/videos')
      .then(response => response.json())
      .then(data => {
        const { query } = this.state;
        const filteredData = data.filter(element => {
          return element.title.toLowerCase().includes(query.toLowerCase());
        });
        this.setState({
          data,
          filteredData
        });
      });
  };

componentWillMount() {
    this.getData();
  }

  render() {
    return (
      <div className="searchForm">
        <form>
          <input
            placeholder="Search for..."
            value={this.state.query}
            onChange={this.handleInputChange}
          />
        </form>
        <Videos videos={this.state.data}/>
        <div>{this.state.filteredData.map(i => <p>{i.name}</p>)}</div>
      </div>
    );
  }
}

I am new to react, any pointers will be appreciated.

EVeras · Accepted Answer · 2020-11-16 16:29:17Z

1

You are creating a new object without the data property and setting that object as the state whenever you are calling this.setState. So the data property is getting deleted.

On the handleInputChange method do this:

 return {
       ...this.state,
        query,
        filteredData
 };

And on the getData method do this:

 this.setState({
          ...this.state,
          data,
          filteredData
 });

edited Nov 16, 2020 at 16:29

answered Nov 16, 2020 at 16:23

EVeras

3241 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pavel Alekseev Over a year ago

He doesn't mutate the state. He creates a new object for the state but without ...this.state

EVeras Over a year ago

You're right. I updated the answer. Thanks @RukkiesMan.

Pavel Alekseev · Accepted Answer · 2020-11-16 16:22:30Z

0

You are using this.state.data in the Videos component which you got from the server. You should use this.state.filteredData to show entries depend on query:

<Videos videos={this.state.filteredData}/>

answered Nov 16, 2020 at 16:22

Pavel Alekseev

1,2221 gold badge10 silver badges20 bronze badges

1 Comment

kl_divergence Over a year ago

Thanks. Your suggestion along with EVeras helped. I can only mark one answer as solved.

Adithya · Accepted Answer · 2020-11-16 16:26:09Z

0

You need to bind the handleInputChange to this. Look at this for more on this.

answered Nov 16, 2020 at 16:26

Adithya

1,7281 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Search over json object (react)

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related