The state variable returned after using useState react hook shows .map is not a function

Question

This code gives me error when I try to map the state variable returned after calling useEffect hook. On console, when I print the myAppointment it shows two values one is empty ([]) and other (Array[25]) I want to extract the petname values from this array . But getting error "map is not a function" Please look into it and help me!

function App() {
  const [myAppointment, setmyAppointment] = useState([])
  useEffect(() => {
      fetch('./data.json')
      .then(response=> response.json())
      .then(result=>{
        const apts=result.map(item=>{
          return item
        })
        setmyAppointment(state=>({...state,
          myAppointment:apts
        }))
      })**strong text**
  },[])

  console.log(myAppointment)
  const listItem = myAppointment.map((item)=>{
    return(
      <div>{item.petName}</div>
    )
  })

  return (
    <main className="page bg-white" id="petratings">
    <div className="container">
      <div className="row">
        <div className="col-md-12 bg-white">
          <div className="container">
            {/* {listItem} */}
            <div><AddAppointment /></div>
            <div><SearchAppointment /></div>
            <div><ListAppointment /></div>
          </div>
        </div>
      </div>
    </div>
  </main>
  );
}

Your setmyAppointment() call turns myAppointment into an object, arrays use square brackets: [...]. You probably want .then(result => setmyAppointment([...myAppointment, result])); (useState() creates separate state variables; you don't use it like this.setState() where you have to pass the key: reactjs.org/docs/hooks-state.html) — user5734311
– user5734311, Commented May 30, 2020 at 9:42
setmyAppointment(state=>([...state, myAppointment:apts ])) You mean like this I should write? — Gazal Jain
– Gazal Jain, Commented May 30, 2020 at 9:49
You can actually use setmyAppointment(result), since you don't have to append to an existing array — user5734311
– user5734311, Commented May 30, 2020 at 10:15

Shubham Khatri · Accepted Answer · 2020-05-30 09:52:29Z

1

You have you state as an array. However when you try to update it you convert it into an object with key myAppointment which is the cause of your error.

You must update your state like

  setmyAppointment(state=> [...state, ...apts]);

However since the state is initially empty and you only update it once in useEffect on initialLoad, you could also update it like

 setmyAppointment(apts);

answered May 30, 2020 at 9:52

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

Suraj Auwal · Accepted Answer · 2020-07-11 15:28:35Z

1

The problem is from the way you're setting your state after the data is fetched.

You're setting the state as an object by instead of an array.

Let's Take a look at the line where you set the state.

setmyAppointment(state=>({...state,
          myAppointment:apts
        }))

Using the spread operator with curly braces tells JavaScript compiler to spread an object, and obviously that's not what you want.

What you ought to do is instead of curly braces, use square brackets. That will tell the compiler you want to spread an array.

So it should be something like this .


setmyAppointment(state=>([...state
        ]))

And if I were you, I will do this a little bit different. I will set the state like this

setmyAppointment(apt)

I hope this helps

edited Jul 11, 2020 at 15:28

answered May 30, 2020 at 10:02

Suraj Auwal

3284 silver badges10 bronze badges

Collectives™ on Stack Overflow

The state variable returned after using useState react hook shows .map is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related