React Code Challenge

Requirements

• NodeJS

• VSCode

• Git

• run

  • npm install
  • npm start

1. We create a separate component for every api name like People, Planet etc and call api to get data, filter , view data const [data, setData] = useState([]); const apiName = window.location.href.split("/").pop();

   useEffect(() => { const fetchData = async () => { const response = await fetch(https://swapi.info/api/people); const result = await response.json(); setData(result); }; fetchData(); }, [apiName]);

   const handleSearch = (e) => { const query = e.target.value; if (query.length > 2) { const SearchData = async () => { const response = await fetch( https://swapi.info/api/people?search=${query} ); const result = await response.json(); setData(result); }; SearchData(); } };

1. We can use result keys, values and have a 1 component and show dataList based on the "urlName" api to get data, filter , view data like below Ex: const apiName = window.location.href.split("/").pop();

   https://swapi.info/api/${apiName}

   After getting we can store keys in a state variable like below const [data, setData] = useState([]); const [keys, setKeys] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
        const response = await fetch(`https://swapi.info/api/${apiName}`);
        const result = await response.json();
        setKeys(result?.map((ob) => Object.keys(ob)));
   
        setData(result);
        };
        fetchData();
    }, [apiName]);
   

2. Also to show single data we can create a Component named - ViewDetailed.js and use the above logic to get data

   const [data, setData] = useState([]);

   const id = window.location.href.split("/").pop(); const apiName = window.location.href.split("/").slice(-2)[0];

   useEffect(() => { const fetchData = async () => { const response = await fetch(https://swapi.info/api/${apiName}/${id}); const result = await response.json(); setData(result); }; fetchData(); }, []);