How can I return an array from function and use it's elements as a JSX

Question

I don't know why but for some reason I can't return an array from the function and so I can't use it as a JSX. Can you explain me how can I do that? or I would be very happy if you'll show me the solution. I just need to print objects as a text from filteredArr array. I'm new to react and looks like everything is not same in react and javascript. Here's my code:

 const payloadURL = "https://swapi.dev/api/people/"; const usePeopleData = (filterParams) => { fetch(payloadURL).then((response) => response.json()).then((data) => { let result = data.results; // To put every element as an object in array let arr = []; for (let i in result) { let obj = { name: result[i].name, mass: result[i].mass, height: result[i].height, gender: result[i].gender } arr.push(obj); } let condition = (prop) => prop.height > filterParams.minHeight && prop.gender === filterParams.gender? true: false; let filteredArr = arr.filter((person) => condition(person)); console.log(filteredArr); return filteredArr; }); }; const filterPeopleParams = { gender: "male", minHeight: 130 }; function App() { usePeopleData(filterPeopleParams); return ( <div className="App"> <div> <label> Mission name: <input /> </label> </div> <h3>People</h3> <div> <p>/* NEED TEXT HERE */</p> </div> </div> ); } App();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

Thanks in advance!

Answer 1

at first be carefull in Naming the methods(usePeopleData is detected to be a react customhook. have a look at customhooks naming), then you need to be more deep in react concepts like, declaring a var in state, and calling the api inside useEffect cyclehook and setting the data in state. them showing the result in render.

check this:https://codesandbox.io/s/eloquent-cannon-2vrfs?file=/src/App.js

import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
  const [missionName, setMissionName] = useState("");
  const [list, setList] = useState([]);

  const geteopleData = (filterParams) => {
    const payloadURL = "https://swapi.dev/api/people/";
    fetch(payloadURL)
      .then((response) => response.json())
      .then((data) => {
        let result = data.results;

        // To put every element as an object in array
        let arr = [];
        for (let i in result) {
          let obj = {
            name: result[i].name,
            mass: result[i].mass,
            height: result[i].height,
            gender: result[i].gender
          };
          arr.push(obj);
        }
        let condition = (prop) =>
          prop.height > filterParams.minHeight &&
          prop.gender === filterParams.gender
            ? true
            : false;
        let filteredArr = arr.filter((person) => condition(person));
        console.log("filteredArr: ", filteredArr);
        setList(filteredArr);
        // return filteredArr;
      });
  };

  useEffect(() => {
    let filterPeopleParams = { gender: "male", minHeight: 130 };
    geteopleData(filterPeopleParams);
  }, [missionName]);

  return (
    <div className="App">
      <div className="App">
        <div>
          <label>
            Mission name:{" "}
            <input
              value={missionName}
              onChange={(e) => setMissionName(e.target.value)}
            />
          </label>
        </div>
        <h3>People</h3>
        <div>
          {list.map((item) => {
            return <p>{item.name}</p>;
          })}
        </div>
      </div>
    </div>
  );
}


````