How to send values from api after maping react hooks

Question

I'm using react hooks and i trying to send the value to function delete and to do function put

           <Fab aria-label="delete"
                      className={classes.fab}
                      value={vacation.id}
                      key={vacation.id}
                      onChange={setDeleteid(vacation.id)}
                      onClick={DeleteCard}>
                      <DeleteIcon />
                    </Fab>

this is the function

  const DeleteCard = (e) => {
e.preventDefault();

console.log('delete' + deleteid);
alert(deleteid)
const confirm = window.confirm(`You are sure you want to delete vacation number ?`);
if (confirm == true) {
await axios.delete(`http://localhost:4000/users/admin/delete/:${e}`)
} else {
  alert("You pressed Cancel!")
}

}

this is the my state

     //vacation
  const [vacation, setVacation] = useState([]);
  const [deleteid, setDeleteid] = useState();
  //putcard
  const [description, setDescription] = useState("");
  const [destination, setDestination] = useState("");
  const [fromDate, setFromDate] = useState("");
  const [toDate, setToDate] = useState("");
  const [price, setPrice] = useState("");

Apparently the id I'm trying to send to state doesn't come in because it records me undifind

UPDATE

This is my state

const [deleteid, setDeleteid] = useState('');

Here I want to send and it gives me undefined

  onChange={() => setDeleteid(value)}

Celso Wellington · Accepted Answer · 2019-09-24 14:29:37Z

1

It's because you're executing the function as the DOM renders (it runs the function once). To fix this, change your onChange event to an arrow function that calls your function, like this:

onChange={() => setDeleteid(vacation.id)}

This should do the trick, happy coding!

answered Sep 24, 2019 at 14:29

Celso Wellington

9049 silver badges22 bronze badges

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

3 Comments

user11395273 Over a year ago

Yes I did that already but then he gives me the next problem >>>Too many re-renders. React limits the number of renders to prevent an infinite loop.

Celso Wellington Over a year ago

why are you using e instead of e.target.value ? Also, you must bind the value to something that you can set with the input, otherwise you wont be able to change it (change the value to setDeleteId state)

user11395273 Over a year ago

No it doesn't help

Collectives™ on Stack Overflow

How to send values from api after maping react hooks

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related