Having trouble with handle change function ,leaves one character out

So the handle change method works , but always forgets the last character of my string(when I type "test" it saves "tes") ,even when I am testing to see if there are value with the error in the function ,only pick up the error if there is one character left. Any suggestion would be helpful.

const [ tools, setTools ] = useState({
        name: props.values.name || '',
        description: props.values.description || '',
        notes: props.values.notes || '',
        downloadLink: props.values.downloadLink
    });
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setTools((prevState) => ({
            ...prevState,
            [name]: value 
        }));
        props.setEditValues(tools);
        if (!tools.name || !tools.description || !tools.downloadLink) {
            props.setError(true);
        }
        else {
            props.setError(false);
        }
        

    };

<TextField
                            error={props.error}
                            fullWidth
                            label='Name'
                            name='name'
                            onChange={handleChange}
                            value={tools.name}
                            variant='outlined'
                        />

>Solution :

The issue is that the tools is not up to date in the scope of the handleChange function after you call setState.

Calling setState does update the tools value in the component state, but the handleChange function needs to be recreated so it would have the updated value.

One way to solve the issue is using a useEffect hook:

  const [tools, setTools] = useState({
    name: props.values.name || '',
    description: props.values.description || '',
    notes: props.values.notes || '',
    downloadLink: props.values.downloadLink
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setTools((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  useEffect(() => {
    props.setEditValues(tools);
    if (!tools.name || !tools.description || !tools.downloadLink) {
      props.setError(true);
    }
    else {
      props.setError(false);
    }
  }, [tools, props.setEditValues, props.setError]);

  <TextField
    error={props.error}
    fullWidth
    label='Name'
    name='name'
    onChange={handleChange}
    value={tools.name}
    variant='outlined'
  />

Another way is to use an updated tools value in the handleChange function, so the function would look like this and you don’t need useEffect:

  const handleChange = (e) => {
    const { name, value } = e.target;
    const nextTools = { ...tools, [name]: value };
    setTools(nextTools);
    props.setEditValues(nextTools);
    if (!nextTools.name || !nextTools.description || !nextTools.downloadLink) {
      props.setError(true);
    }
    else {
      props.setError(false);
    }
  };