How to map through array inside the object in react.js?

Question

I have tried

import React,{useState,useEffect} from 'react'
//import usestack from './Usestack'

export default function Table() {
    const [query, setQuery] = useState();
    const [finalq, setFinalq] = useState();
    const [pagenumber, setPagenumber] = useState(1);
    const [ques, setQues] = useState();
  
    async function apicall(finalq, pagenumber){
        var res = await fetch(`https://api.stackexchange.com/2.3/questions?page=${pagenumber}&order=desc&sort=activity&tagged=${finalq}&site=stackoverflow`)
        var data = await res.json();
        setQues(data)
    }

    const setq = (e)=>{
        setQuery(e.target.value);
    }

    const submitq=()=>{
        setFinalq(query);
        setQuery(' ');
        setPagenumber(1);
    }

    useEffect(() => {
        apicall(finalq,pagenumber);
    },[finalq, pagenumber])

    //console.log(ques); 

    return (
        <>
        <div>
            <input type='text' value={query} onChange={setq}/>    
            <button onClick={submitq}>Submit</button>
            <table>
                <tr>
                    <th>User id</th>
                    <th>User name</th>
                    <th>Quetion</th>
                </tr>
            </table>
            {ques.items.map((i,key)=>(
                <div>samruddh</div>
            ))}
        </div>
        </>
    )
}

but it is not working, it just makes react page plain white I have added the whole component and also so please check that.

I am fetching StackOverflow API with help of the input tag and button.

please check your console. as you print it in console. you did not use any html tag to show your data into page — Khabir
– Khabir, Commented Dec 16, 2021 at 14:11
What are you trying to do after mapping through your array? Are you updating your react state because I don't see that in the code you provided. As per that you're only logging the each element of the iteration to the console. — Siddhant Varma
– Siddhant Varma, Commented Dec 16, 2021 at 14:11
How does your object look like inside the array items. Add array here... — DecPK
– DecPK, Commented Dec 16, 2021 at 14:15
Could you add the whole component that you have this code in? With the one line you have here it is quite hard to help you since we have no idea what is going on — TimmNL
– TimmNL, Commented Dec 16, 2021 at 14:21

Khabir · Accepted Answer · 2021-12-16 14:21:51Z

1

I just used your code in the below picture and it shows exact output on right side:

But as you said you seeing it just makes react page plain white so you need to use something like below to show the output on your react page.

<div>
{ 
  objectName.items.map((i, key)=>{
     <div>{i}</div>
  });
}
</div>

answered Dec 16, 2021 at 14:21

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to map through array inside the object in react.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related