How can i pass the input text to the filter component in my React application

Question

I am trying to build an application using "rick and morty API" where there is list of characters with various parameters such as gender,alive status,image etc.

What i am trying to do: 1) I am trying to create a search bar, so that i can search names from the list of 493 characters.

My CardList.js component:

import React from "react";
import axios from "axios";
import Card from "./Card";

class CardList extends React.Component {
  state = {
    // url: `https://rickandmortyapi.com/api/character/${[...Array(494).keys()]}`,
    character: []
  };

  async componentDidMount() {
    //const res = await axios.get(this.state.url);
    const ids = Array(493)
      .fill(null)
      .map((_, idx) => idx + 1)
      .join(","); // '1,2,3...,300'
    const url = `https://rickandmortyapi.com/api/character/[${ids}]`;
    const res = await axios.get(url);

    this.setState({
      character: res.data
    });
  }

  handleChange(e) {
    e.preventDefault();
    let typedValue = e.target.value;
    console.log(typedValue);
  }

  render() {
    let filter = this.state.character.filter(function(e) {
      return e.name.includes("Pickle Rick");
    });

    return (
      <div>        
        <form>
          <input type="text" name="title" onChange={this.handleChange} />          
        </form>

        {filter.map(character => (
          <Card
            key={character.id}
            imgURL={character.image}
            id={character.id}
            name={character.name}
            status={character.status}
            species={character.species}
            gender={character.gender}
            type={character.type ? character.type : "Unknown"}
          />
        ))}
      </div>
    );
  }
}

export default CardList;

In my filter method i have hard-coded the name of one of the characters as "Pickle Rick", but i want to pass "event.target.value", so that it can match up the value and can render the exact card which matches only. How can I do that? Help me out, please!

Answer 1

You can set the typedValue in your state.

handleChange = e => {
    e.preventDefault();
    let typedValue = e.target.value;
    this.setState({typedValue});
}

When you are initializing state you can initialize this typedValue with an empty string

this.state = {
    character: [],
    typedValue: ''
};

And in your render you can use these values from state

render() {
    const {character, typedValue} = this.state
    let filter = character.filter(char => char.name.includes(typedValue));
    // ...
}

Answer 2

You can create another array in the state

state = {
  character: [],
  filteredCharacter: [], //for filtered list
}

Now in the handleChange you can add the following code

  handleChange(e) {
     e.preventDefault();
     const { character } = this.state;
     let typedValue = e.target.value;
     let filteredCharacter = character.filter(char => char.includes(typedValue))
     this.setState({filteredCharacter}) 
  }

Now you can directly user filteredCharacter inside render method

Answer 3

In my opinion why don't you set one state for setting the character.

Like: -

state = {

character: [],
typedValue: '',

};

handleChange(e) {

e.preventDefault();
let typedValue = e.target.value;
this.setState({typedValue});

}

Then inside render method: -

render() {

let filter = this.state.character.filter(function(e) {

  return e.name.includes(this.state.typedValue);

});

}

I hope this answer your question.

Answer 4

Your method could be:

    async handleChange (e) {
        e.preventDefault();
        const typedValue = e.target.value;
        const url = `https://rickandmortyapi.com/api/character/?name=${typedValue}`;
        const res = await axios.get(url);
        // now render the result    
      }