How do i implement a search bar which fetches information using an API

Question

I am trying to build an application using "Rick and Morty" REST API. I have created the "card.js" component which fetches data from the API such as characters, name, id, species, and I am mapping on the cards in my "cardList.js" component.

What I am trying to do:

1) I am trying to implement a search bar over the top of the application, which will display a specific card based on what I have searched, let's say i have searched "Rick", so it will display all the cards which has "Rick" in its name. 2) Further, we can also search for anything related to the parameters that i have specified in the card such as gender, type etc.

What I tried already:

1) I created a component called "Search2.js" 2) In this component, I have a "form" which contains the input type, and a button to search the input which the user has entered. 3) In the "cardList.js" component I passed the "Search2.js" component over the "card.js" component so that it stays at the top(search bar and the button) 4) I am mapping over "Search2.js" in my "CardList.js" component to pass the characters as props in my "Search2.js" component, and luckily i am getting all the characters in my console when i am doing console.log({this.props.name}).

The problem: 1) I am getting confused how do i compare individual names(from this.props.name) with the input i have provided in my form in the "Search2.js" component 2) I tried, but all i am getting is my form which is mapped over 493 times(it is the number of characters in the API)

My Card.js component:

import React from "react";

class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>ID: {this.props.id}</h1>
        <img src={this.props.imgURL} alt="Image failed to load" />
        <h1>NAME: {this.props.name}</h1>
        <h2>STATUS: {this.props.status}</h2>
        <h3>SPECIES: {this.props.species}</h3>
        <h3>GENDER: {this.props.props}</h3>
        <h4>TYPE: {this.props.type}</h4>
      </div>
    );
  }
}

export default Card;

My CardList.js component:

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

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
    });
  }

  render() {
    return (
      <div>
        {this.state.character.map(character => (
          <Search2 name={character.name} />
        ))}
        {this.state.character.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;

My Search2.js component :

import React from "react";

class Search2 extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    const searchValue = event.target.value;

    if (searchValue === "{this.props.name}") {
      console.log("matched");
    } else {
      console.log("doesnt match");
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <p>
          <input type="text" placeholder="Enter character" name="fullName" />
        </p>
        <p>
          <button>Search2</button>
        </p>
      </form>
    );
  }
}

export default Search2;

Help me out, please!!

Answer 1

My idea to help you solve this problem goes like this:

render() {
    return (
      <div>

        {
let filter=this.state.character.filter(function(e)
{
//here you can filter out anything you want, for example:
return e.name.includes("Rick") // <- this will check the data you already got from axios //to filter out for every name that contains "Rick', you can then replace "Rick" with your input's value, using State or anything you like
}

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>
    );
  }
}

this way you will firstly filter out data, then you map this as you did before, but this time it will only show records that get through your filter process

Here you can check the idea behind it JSFIDDLE