dynamic add components based on user input-CodePudding

I'm creating a page where a person can search for pokemon. If the pokemon API finds such a pokemon, it displays it in the list below, but I have one problem. I have absolutely no idea how to display more than one component with data. Especially when fetching, the date saves the id of a given pokemon to make it unique, but I have no idea how to implement it into the code to make it work this way.

Main.js

import React from 'react'
import './Main.css'
import { useState } from 'react';
import CardComponent from './CardComponent';



const Main = () => {

    const [value, setValue] = useState('')
    const [pokemonName, setPokemonName] = useState('');
    const [pokemonPhoto, setPokemonPhoto] = useState('');
    const [pokemonIndex, setPokemonIndex] = useState('');

    const exportDataToClass = (event) => {
        event.preventDefault();
        setValue(event.target.value)
    }

    const handleClick = event => {
        event.preventDefault();
        
        fetch(`https://pokeapi.co/api/v2/pokemon/${value}`)
        .then((res) => res.json())
        .then((data) => {
            let index = 0;
            setPokemonName(data.name);
            setPokemonPhoto(data.sprites.other.dream_world.front_default);
            setPokemonIndex(data.id);  
        })
    };

    


  return (
    <div>
        <div className="container">
            <div className="container-header">
                    <h1 className='title'>POKEMON FINDER</h1>
                    <div className='container-content'>
                        <input className='pokemon-finder' type='text' placeholder='POKEMON FINDER..' onChange={exportDataToClass} value={value}/>
                        <button className='button' type='submit' onClick={handleClick}>Find</button>
                    </div>
            </div> 
            <div className="container-content-cards">
                <h1 className='title'>Pokemons</h1>
                <div className='cards'>
                  <CardComponent pokemonName={pokemonName} pokemonPhoto={pokemonPhoto}/>
                </div>   
            </div>
        </div>
    </div>  
  )
}

export default Main

CardComponent.js

import React from 'react'
import './CardComponent.css'

const CardComponent = ({pokemonName,pokemonPhoto, pokemonIndex}) => { 
return (
    <div className='pokemon-card'>
            <div className='pokemon-card-content'>
                <span className='pokemon-card-name'>{pokemonName}</span>
                <img className='pokemon-card-image' src={pokemonPhoto} alt={pokemonName} />
                </div>
        </div>
  )
}

export default CardComponent

CodePudding user response：

You need to create an array list for all your pokemon in useState. After every fetch, you should add new pokemon to this list. And just to using map render all of it.

import React from 'react'
import './Main.css'
import { useState } from 'react';
import CardComponent from './CardComponent';



const Main = () => {

    const [value, setValue] = useState('')
    const [pokemon, setPokemon] = useState([]);
        
    const exportDataToClass = (event) => {
        event.preventDefault();
        setValue(event.target.value)
    }

    const handleClick = event => {
        event.preventDefault();
        
        fetch(`https://pokeapi.co/api/v2/pokemon/${value}`)
        .then((res) => res.json())
        .then((data) => {
            let index = 0;
            setPokemon(prev=> [...prev, {
               name:data.name,
               photo:data.sprites.other.dream_world.front_default,
               index:data.id
            }])

        })
    };

    


  return (
    <div>
        <div className="container">
            <div className="container-header">
                    <h1 className='title'>POKEMON FINDER</h1>
                    <div className='container-content'>
                        <input className='pokemon-finder' type='text' placeholder='POKEMON FINDER..' onChange={exportDataToClass} value={value}/>
                        <button className='button' type='submit' onClick={handleClick}>Find</button>
                    </div>
            </div> 
            <div className="container-content-cards">
                <h1 className='title'>Pokemons</h1>
                <div className='cards'>
                   {pokemon.map(item=> (
                     <CardComponent pokemonName={item.name} pokemonPhoto={item.photo}/> 
                    )}
                </div>   
            </div>
        </div>
    </div>  
  )
}

export default Main