how to set value in array react hook usestate

Hello developers! In this tutorial I have shared the details about “how to set value in array react hook usestate”. Okay, let’s move on to the tutorial.

how to set value in array react hook usestate

setTheArray([...theArray, newElement]);
const useState, useCallback = React;
function Example() 
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => 
        setTheArray([...theArray, `Entry $theArray.length`]);
    ;
    return [
        <input type="button" onClick=addEntryClick value="Add" />,
        <div>theArray.map(entry =>
          <div>entry</div>
        )
        </div>
    ];


ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
const[array,setArray]= useState([
        id: 1, value: "a string", othervalue: "",
        id: 2, value: "another string", othervalue: "",
        id: 3, value: "a string", othervalue: "",
    ])

const updateItem =(id, whichvalue, newvalue)=> 
  var index = array.findIndex(x=> x.id === id);

  let g = array[index]
  g[whichvalue] = newvalue
  if (index === -1)
    // handle error
    console.log('no match')
  
  else
    setArray([
      ...array.slice(0,index),
      g,
      ...array.slice(index+1)
    ]
            );

//how to use the function    
onPress=()=>updateItem(2,'value','ewfwf')
onPress=()=>updateItem(1,'othervalue','ewfwf')
/*
the first input of the function is the id of the item
the second input of the function is the atrribute that you wish to change
the third input of the function is the new value for that attribute
It's a pleasure :0
~atlas
*/
// sample datas structure
/* const datas = [
    
      id:   1,
      name: 'john',
      gender: 'm'
    
    
      id:   2,
      name: 'mary',
      gender: 'f'
    
] */ // make sure to set the default value in the useState call (I already fixed it)

const [datas, setDatas] = useState([
    
      id:   1,
      name: 'john',
      gender: 'm'
    
    
      id:   2,
      name: 'mary',
      gender: 'f'
    
]);

const updateFieldChanged = index => e => 

    console.log('index: ' + index);
    console.log('property name: '+ e.target.name);
    let newArr = [...datas]; // copying the old datas array
    newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to

    setDatas(newArr); // ??


return (
    <React.Fragment>
         datas.map( (data, index) => 
              <li key=data.name>
                <input type="text" name="name" value=data.name onChange=updateFieldChanged(index)  />
              </li>
          )
        
    </React.Fragment>
)

Final Thoughts

I hope this post helps you to know about “how to set value in array react hook usestate”. If you have any questions regarding this article please let us know via the comment section. Share this post with your friends & family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment