Get text Input Value React

Question

I'm trying to track the text input value using states but "e.target.value" doesn't seem to work(maybe because my component is declared as a function). Is there any other way I can do it?

const UncontrolledDiagram = ({ sentence }) => {
  // create diagrams schema

  const [schema, { onChange, addNode, connect, removeNode }] = useSchema(initialSchema);

  const [selected, setSelected] = useState([]);

  const [textInput,setInput]=useState('')
  
  const handleTextChange=(e)=>{
    setInput(e.target.value);
    console.log(textInput);
  }

This is the input field I am tracking:

const conditionalDisplay=(id)=>{
    const nodeToCheck=schema.nodes.find(node=>node.id=== id);
    if(nodeToCheck.form===null){
      return(
        <div>
          <label>Form: </label><input style={{ width: '25px', height: '12px' }} onChange={handleTextChange} type='text'></input>
          <button className='buttonInputSubmit'>+</button>
        </div>
      )
    }
    else{
      return(
        <div style={{display: 'flex',margin: '0'}}>
          <label>Form: </label><p style={{color: 'yellow', marginLeft:'2px'}}>{nodeToCheck.form}</p>
        </div>
      )
    }
  }

FireFighter · Accepted Answer · 2021-04-21 14:24:43Z

1

It works, your console.log(textInput) still has the old state because state is set asynchronously. It will set the state as soon as your function has been fully executed.

const handleTextChange=(e)=>{
   setInput(e.target.value);
}

useEffect(() => {
    console.log(textInput);
}, [textInput])

answered Apr 21, 2021 at 14:24

FireFighter

7064 silver badges6 bronze badges

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

1 Comment

Rob Terrell Over a year ago

that's because you are console logging in a syncronous way.

Collectives™ on Stack Overflow

Get text Input Value React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related