Question 73106 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Warning of React setstate with an array without key props – Reactjs

Hi i am using React with an array mapping , in a user click function , i need to check which button user in pressing and set the button Pressed to be true, with the remaining set to false, my code attached worked ok but I have question where can i put the key(id/index) props inside it so as to remove the warning of each child should have unique key something of that …………….

    const initialStates = [
        true,
        false,
        false,
        false,
        false,
    ]
    const handleshow = (clicked_idx) => {
        console.log("you click on " ,clicked_idx, "index")
        setShow(initialStates.map((key,idx) => idx === clicked_idx ? true:false))
        setShowText(clicked_idx)
    }

my jsx code was

const timewordings = [
        {
            year    : 2017,
            title   : 't1',
            content : 'c1'
        },
        {
            year    : 2018,
            title   : 't2',
            content : 'c2'
        },
        {
            year    : 2019,
            title   : 't3',
            content : 'c3'
        },
        {
            year    : 2022,
            title   : 't4',
            content : 'c4'
        },
        {
            year    : 2023,
            title   : 't5',
            content : 'c5'
        },
    ] 
  <div className='absolute top-1/3 flex flex-col gap-10'>
                                {timewordings.map((timewording,index)=>
                                    <div className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>
                                        <div className={`-translate-y-2 -translate-x-[0.24rem] text-4xl ${(show[index])?"scale-100":"scale-0"}`}>.</div>
                                        <div className='text-5xl' key={index} onClick={(e) => handleshow(index)}>{timewording.year}</div>

I would appreciate if someone canhelp and thanks in advance

Tags:

2

Answers


  1. 0

    Add the key to your button. I guess you’re doing something like in your JSX:

    {
   initialStates.map((s, idx) => <button key={idx} onClick={() => handleShow(idx)}>button</button>)
}

    Post OP edit: Give the parent element in the .map the key

    timewordings.map((timewording, index) => {
  return (
    <div key={index} className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>
      <div className={`-translate-y-2 -translate-x-[0.24rem] text-4xl ${(show[index])?"scale-100":"scale-0"}`}>.</div>
      <div className='text-5xl' key={index} onClick={(e) => handleshow(index)}>{timewording.year}</div>
    </div>
  )
})
    Login or Signup to reply.
  2. 0

    In the code you provided, the key prop is missing in the outermost div element that is being iterated over in the timewordings.map() function. The key prop is important because it helps React keep track of which elements have changed, been added, or removed when rendering arrays of elements.

    To fix the issue, you can add a unique key prop to the outermost div element, like this:

    <div key={index} className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>

    Note that it’s generally recommended to use a unique identifier as the key prop instead of the index of the element in the array, especially if the order of elements in the array can change. If you have a unique identifier for each element in the timewordings array, you can use that instead of the index. For example:

    <div key={timewording.year} className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search