Quantcast
Channel: Active questions tagged r - Stack Overflow
Viewing all articles
Browse latest Browse all 201919

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

$
0
0

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!


Viewing all articles
Browse latest Browse all 201919

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>