useState with array react code example
Example 1: how to set value in array react hook usestate
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){
console.log('no match')
}
else
setArray([
...array.slice(0,index),
g,
...array.slice(index+1)
]
);
}
onPress={()=>updateItem(2,'value','ewfwf')}
onPress={()=>updateItem(1,'othervalue','ewfwf')}
Example 2: simple usestate example
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function LessText({ text, maxLength }) {
const [hidden, setHidden] = useState(true);
if (text.length <= maxLength) {
return <span>{text}</span>;
}
return (
<span>
{hidden ? `${text.substr(0, maxLength).trim()} ...` : text}
{hidden ? (
<a onClick={() => setHidden(false)}> read more</a>
) : (
<a onClick={() => setHidden(true)}> read less</a>
)}
</span>
);
}
ReactDOM.render(
<LessText
text={`Focused, hard work is the real key
to success. Keep your eyes on the goal,
and just keep taking the next step
towards completing it.`}
maxLength={35}
/>,
document.querySelector('#root')
);