Tengo un código en el que hago una solicitud de publicación a la API y obtengo todos los datos de la API en una tabla. Y estoy buscando datos de moneda con nombre de moneda si los encuentro, estoy imprimiendo los datos en div si no los encuentro, quiero imprimirlos que no se encuentran en el mismo div.
import { useState,useEffect } from "react"; import axios from "axios"; function CurrencyInfo (){ let [currData, setCurrData] = useState([]) let [searchData, setSearchData] = useState([]); useEffect(()=>{ axios.get("https://api.coinbase.com/v2/currencies").then((res)=>{ setCurrData(res.data.data) }) },[]) let Search = (event) =>{ event.preventDefault(); let arr = [] let toSearch = event.target.search.value; currData.map((val)=>{ if(toSearch.toLowerCase() === val.name.toLowerCase()){ arr.push(val.name,val.id,val.min_size) return setSearchData(arr) } }) } return ( <div> <form onSubmit={Search}> <input type = "text" name="search"/><br/> <input type= "submit" value="Search" className="buttons"/> </form> {searchData.map((val)=>{ return <div>{val}<div id="not"></div></div> })} <table border="1"> <tr> <th>Name</th> <th>Id</th> <th>Minimum value</th> </tr> {currData.map((val)=>{ return ( <tr> <td>{val.name}</td> <td>{val.id}</td> <td>{val.min_size}</td> </tr> ) })} </table> </div> ) } export default CurrencyInfoPuede intentar esto para resolver su problema (suponiendo que tiene un parámetro de name en moneda):
{searchData.map((val)=>{ return <div>{val.name || 'not found'}</div> })}puede usar una declaración condicional en la matriz de datos de búsqueda
searchData.length >= 0 ? ( {searchData.map((val)=>{ return <div>{val}</div> })} ) : ( return <div id="not">Data not found</div>)