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!