Pushing array with useState()

Question

Everyone! i just have this kind of problem that i can`t fix.

this is my App.js

import { useState } from "react"
import Header from "./components/header"
import FeedbackList from "./components/FeedbackList"
import FeedbackData from "./data/FeedbackData"

function App() {

    const [feedback, setFeedback] = useState(FeedbackData)

    return (
        <>
        <Header />
        <div className="container">
            <FeedbackList feedback={feedback} />
        </div>
        </>
    ) }

    
    export default App

and this is my second js file that i want to use "feedback" prop like array

import FeedbackItem from "./FeedbackItem"
import FeedbackData from "../data/FeedbackData"
function FeedbackList(feedback) {

return (
    <div>
        {feedback.map((item)=>(
            <FeedbackItem key={item.id} item={item}/>
        ))}
    </div>
  )
}

i cant use feedback.map function in this case because feedback is not like array (sorry for my bad english) i solve this problem without using hooks but i want to know what i can do in this case,sorry if im writing something wrong im just new in React and trying to learn.

in ' second js file' before return can you do a console and see whats the output? if its array do this `feedback && feedback .map(item=> (...))` if its obj do this `feedback && feedback .keys(obj).map((obj.name=> (...))` P.S: better to declare the feedback as array or destructure the result in child component — Amir Danish, Jun 27 '22 at 08:07

score 0 · Answer 1 · answered Jun 27 '22 at 05:59

In Javascript there are object and array. Both can be mapped. For Array.

const arr = [
  { name: "name 1", id: "01" },
  { name: "name 2", id: "02" },
  { name: "name 3", id: "03" },
];

arr.map(item=> (<div key={item.id}>{item.name}</div>))

For Object.

const obj = {
  "item01": { name: "name 1" },
  "item02": { name: "name 1" },
  "item03": { name: "name 1" },
};

Object.keys(obj).map((key)=> <div key={key}>{obj[key].name}</div>)

Check your type, console.log(typeof FeedbackData).

If it is not type error. Instead of

const [feedback, setFeedback] = useState(FeedbackData)

Try this.

const [feedback,setFeedback] = useState([])
useEffect(()=> setFeedback(FeedbackData),[])

score 0 · Answer 2 · answered Jun 27 '22 at 14:19

what you want is to destructure the prop you need from the 'props' object.

function Component1() {
  const [val, setVal] = useState([]);
  
  return <Component2 val={val} />
}

function Component2({ val }) {
  return val.map...
}

this is equivalent to doing:

function Component2(props) {
  return props.val.map...
}

this is because props is an object, and so you need to get the right key from the object based on the prop name, either by destructuring or accessing it via props.propName

Pushing array with useState()

2 Answers2