How to get textarea value using Reactjs-CodePudding

I am working on Reactjs and using nextjs, Right now i am trying to get value of "textarea" and "dropdown/select", but i am getting empty result,How can i do this ? I tried with following code

  const msgChange = (e) => {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.msg]: value
    });
  };

  const countryChange = (e) => {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.country]: value
    });
  };

  const handleSubmit = (e) => {
        var msg = state.msg;
        alert('msg is ' msg);
        
    }


<form className='row' onSubmit={handleSubmit}>
<select className="form-select" aria-label="Default select example" onChange={countryChange} name="country">
<option selected>Country</option>
<option value="abc">abc</option>
<option value="xyz">xyz</option>
</select>
                  
<textarea  onChange={msgChange} name="msgs"></textarea>
 <input type="submit" value="send" className='sendbtn' /> 
</form>

CodePudding user response：

You're setting the key to e.target.msg which doesn't exist. I assume you meant to set it using the element's name instead. You would also need to do that with the select element. So, with that in mind, you can actually combine those two functions into one that handles the change events for both elements.

const { useEffect, useState } = React;

function Example() {

  const [ state, setState ] = useState({});

  const handleChange = (e) => {
  
    // Destructure the name and value from
    // the changed element
    const { name, value } = e.target;
    setState({ ...state, [name]: value });
  };

  // Log the change in state
  useEffect(() => console.log(state), [state]);

  return (
    <form className='row'>
      <select
        className="form-select"
        aria-label="Default select example"
        onChange={handleChange}
        name="country"
      >
        <option selected disabled>Country</option>
        <option value="abc">abc</option>
        <option value="xyz">xyz</option>
      </select>
      <textarea
        onChange={handleChange}
        name="msg"
      ></textarea>
    </form>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

You are setting the wrong attributes in the onChange handlers for both the textArea and select dropdown. Assuming you have the below kind of useState in your code.

const [state, setState] = useState({});

You should use the below attributes to add your value to the state.

const msgChange = (e) => {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.name]: value
    });
};

const countryChange = (e) => {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.name]: value
    });
};

Access the value below from the state

const handleSubmit = (e) => {
   const msg = state.msgs;
   const country = state.country;
   console.log("message ---->", msg, "country --->", country);    
};