How can i create dropdown that only show selected number of an API list with React

Josh Lee 0
Viewed 18

I trying to create a Dropdown that shows some list of an API depending on the number you selected on the dropdown.

For example, if in the dropdown if selected option 30 then it will show the list of 30 from 1-30. If I changed the option to 50 it will show 1-50. How can I do that?

The code :

const [data, setData] = useState([]);
  const [id, setId]= useState('');
  const [index, setIndex] = useState(10)
  

useEffect(() => {
  const loadData = async () => {
    await fetch(`https://swapi.dev/api/people/${id}/`)
    .then((response) => response.json())
    .then((ReceivedData) => setData(ReceivedData));
    }
loadData()
},[id]);
   
return(
 <select>
<option selected >10</option>
<option selected >50</option>
<option selected >60</option>
 </select> 
{data.map((datas,index){
        <table className="table">
     <tbody>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Height</th>
        <th scope="col">Mass</th>
        <th scope="col">Hair Color</th>
        <th scope="col">Eye Color</th>
      </tr>
    </thead>
    <tr key={index}>
        <th scope="row">{datas.name}</th>
        <td>{datas.height}</td>
        <td>{datas.mass}</td>
        <td>{datas.hair_color}</td>
        <td>{datas.eye_color}</td>
      </tr>
    </tbody>
  </table>)}
)
response.filter selected dropdown api reactjs
1 Answers

The API you have given has pagination implemented. So you can query it a few times to get the required amount of results. For 50 call 5 times while incrementing page param. Each request gives 10 people per request.

function App() {
  const [data, setData] = React.useState([]);
  const [id, setId] = React.useState("10");
  const [index, setIndex] = React.useState(10);

  React.useEffect(() => {
    const loadData = async () => {
      const requests = Array.from({ length: parseInt(id) / 10 }, (_, i) =>
        fetch(`https://swapi.dev/api/people/?page=${i + 1}`)
      );
      const responses = await Promise.all(requests);
      const promises = responses.map((response) => response.json());
      const output = await Promise.all(promises);
      setData(output.map((o) => o.results)?.flatMap((arr) => arr));
    };
    loadData();
  }, [id]);

  return (
    <div>
      <select onChange={(e) => setId(e.target.value)}>
        <option selected>10</option>
        <option selected>50</option>
        <option selected>60</option>
      </select>
      {data.map((datas, index) => (
        <table className="table">
          <tbody>
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Height</th>
                <th scope="col">Mass</th>
                <th scope="col">Hair Color</th>
                <th scope="col">Eye Color</th>
              </tr>
            </thead>
            <tr key={index}>
              <th scope="row">{datas.name}</th>
              <td>{datas.height}</td>
              <td>{datas.mass}</td>
              <td>{datas.hair_color}</td>
              <td>{datas.eye_color}</td>
            </tr>
          </tbody>
        </table>
      ))}
    </div>
  );
}

Edit zen-cache-wgzdkn

Amila Senadheera0
Related