import React, { useState } from 'react'

const FormBox = () => {

  const [name, setName] = useState("")
  const [textArea, setTextArea] = useState('')

  const handleSumbit = (e) =>{
    e.preventDefault();
    console.log(name)

  }


  return (
    <form onSubmit={handleSumbit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <textarea value={textArea} onChange={handleSumbit}></textarea>
      <input type="submit" />
    </form>
  )
  }

When the text box is displayed I cannot type in it.

What am I doing wrong...?

CodePudding user response：

import React, { useState } from 'react'

const FormBox = () => {

  const [name, setName] = useState('')
  const [textArea, setTextArea] = useState('')

  const handleSumbit = (e) =>{
    e.preventDefault();
    console.log(name)

  }


  return (
    <form onSubmit={handleSumbit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
      <input type="submit" />
    </form>
  )
  }

The textarea is a controlled input - if you are going to tie the value of the <textarea> to the textArea state variable, you need to update that state variable whenever the user changes the input.

CodePudding user response：

Firstly

You implicitly set the value of your text area using the textArea variable which has an initial state of "" (an empty string).

React automatically refreshes the real DOM from the virtual DOM after every change in state. But the value of your textArea variable doesn't change with this event, so you have to update the state when a value is entered like this:

onChange={(e) => setTextArea(e.target.value)}

After reading your code, I guessed what you wanted to achieve is to prevent the submit button from submitting the form by default and instead logs the name on the console.

I believe this is the code you wanted to achieve:

import React, { useState } from 'react'

const FormBox = () => {

const [name, setName] = useState('')
const [textArea, setTextArea] = useState('')

const handleSumbit = (e) =>{
    e.preventDefault();
    console.log(name)
}


return (
    <form onSubmit={handleSumbit}>
    <label>Enter your name:
        <input 
        type="text" 
        value={name}
        onChange={(e) => setName(e.target.value)}
    />
    </label>
    <textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
    <input type="submit" />
    </form>
)

CodePudding user response：

Shouldn't the onChange={handleSumbit} of the textarea be

onChange={(e) => setTextArea(e.target.value)}

CodePudding user response：

import React, { useState } from 'react'

const FormBox = () => {

  const [name, setName] = useState("")
  const [textArea, setTextArea] = useState('')

  const handleSumbit = (e) =>{
    e.preventDefault();
    console.log(name)
  }

  return (

    <form onSubmit={handleSumbit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setTextArea(e.target.value)}
        />
      </label>
      <textarea value={textArea} onChange={handleSumbit}></textarea>
      <input type="submit" />
    </form>
  )
  }

CodePudding user response：

You can't type here the event not written by you properly, so, you state textarea not updated yet. just needed to change one as a similar name textbox. just replace

<textarea value={textArea} onChange={handleSumbit}></textarea>

to

<textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>

Full code here edited,

import React, { useState } from 'react'

const FormBox = () => {

const [name, setName] = useState('')
const [textArea, setTextArea] = useState('')

const handleSumbit = (e) =>{
    e.preventDefault();
   //  console here form data
}


return (
    <form onSubmit={(e)=>handleSumbit(e)}>
    <label>Enter your name:
        <input 
        type="text" 
        value={name}
        onChange={(e) => setName(e.target.value)}
    />
    </label>
    <textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
    <input type="submit" value="Submit now!" />
    </form>
)

I Hope, work fine using this code

Thanks