I have code where iam making post request to api and getting all the data from api in a table. And I am searching for a currency data with currency name if found i am printing the data in div if not found i want to print not found in the same 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 CurrencyInfo
You can try this to resolve your issue (Assuming you have name parameter in currency) :
{searchData.map((val)=>{
return <div>{val.name || 'not found'}</div>
})}
you can use conditional statement on search data array
searchData.length >= 0 ? (
{searchData.map((val)=>{ return <div>{val}</div> })}
) : ( return <div id="not">Data not found</div>)