reactjs 从 map object 数据更新 setState

Question

I want to update my setValidDate state with date that is coming from the item , but when I set the value right after the data got mapped I got an error says Too many re-renders. React limits the number of renders to prevent an infinite loop Too many re-renders. React limits the number of renders to prevent an infinite loop . Is there any way to update the new value? And why it's error?

const [validDate, setValidDate] = useState("");

return(
  ...
 {items.map((item) => {
 const { id, name, date, image, desc } = item;
 setValidDate(date); //this one cause error
 return (
  ...
        )
)

Answer 1

This is what you are looking for:

const [validDate, setValidDate] = useState("");

updateDate(date){
  setValidDate(date) 
}

return(
  ...
 {items.map((item) => {
 const { id, name, date, image, desc } = item;
 return (
  <input onChange={()=> updateDate(date)}>
        )
)