I am trying to update the state of my component and display it once I submit the form

Here is what I've tried so far,

1. If I dont add onChange to the input, I will not be able to type in value

2. handleChange - I can get value using event.target.value, but I was hoping that I can target all values and put it on one function (not sure if this is possible)

3. handleSubmit - I want to update the state using setState by I dont know how to get each input value

4 Once I got all the value, I was hoping to display the data in my page once I click submit

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props){
    super();
    this.state = {
      uname : "",
      email : "",
      pw : "",
    }
  }


  // handleChange = (e) => {
  //   this.setState({
  //     uname : e.target.value
  //   })
  // }

  
  handleChange = (e) => {
    this.setState({
      uname : e.target.elements.uname.value,
      email : e.target.elements.email.value,
      pw : e.target.elements.pw.value
    })
  }


  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      uname : e.target.elements.uname.value,
      email : e.target.elements.email.value,
      pw : e.target.elements.pw.value
    })
    console.log(this.state)
  }
    render() {
        return (
            <div className="App">
                <form onSubmit={this.handleSubmit}>
          <label>Username</label>
          <input type='text' value={this.state.uname} onChange={this.handleChange} name='uname'/>
          <br />
          <label>Email</label>
          <input type='text' value={this.state.email} onChange={this.handleChange} name='email'/>
          <br />
          <label>Password</label>
          <input type='password' value={this.state.pw} onChange={this.handleChange} name='pw'/>
          <br />
          <button type='submit'>Submit</button>
        </form>
        <h2>Username: {this.state.uname}</h2>
        <h2>Email: {this.state.email}</h2>
        <h2>Password: {this.state.pw}</h2>
            </div>
        );
    }
}

export default App;

Edited: Since I were able to get individual value using e.target.value, I tried using this. But it is not working.

I need to find a way how to get individual value

  handleChange = (e) => {
    const [uname,email,pw] = e.target.value
    this.setState({
      uname : uname,
      email : email,
      pw : pw
    })
  }

CodePudding user response：

It works

 import React from "react";
    import "./styles.css";
    class App extends React.Component {
      constructor(props) {
        super();
        this.state = {
          uname: "",
          email: "",
          pw: "",
          data: {}
        };
      }
    
      handleChange = (e, type) => {
        this.setState({ ...this.state, [type]: e.target.value });
      };
    
      handleSubmit = (e) => {
        e.preventDefault();
        const { uname, email, pw } = this.state;
        this.setState({
          data: {
            uname,
            email,
            pw
          }
        });
        console.log(this.state);
      };
      render() {
        return (
          <div className="App">
            <form onSubmit={this.handleSubmit}>
              <label>Username</label>
              <input
                type="text"
                value={this.state.uname}
                onChange={(e) => {
                  this.handleChange(e, "uname");
                }}
                name="uname"
              />
              <br />
              <label>Email</label>
              <input
                type="text"
                value={this.state.email}
                onChange={(e) => {
                  this.handleChange(e, "email");
                }}
                name="email"
              />
              <br />
              <label>Password</label>
              <input
                type="password"
                value={this.state.pw}
                onChange={(e) => {
                  this.handleChange(e, "pw");
                }}
                name="pw"
              />
              <br />
              <button type="submit">Submit</button>
            </form>
            <h2>Username: {this.state.data.uname}</h2>
            <h2>Email: {this.state.data.email}</h2>
            <h2>Password: {this.state.data.pw}</h2>
          </div>
        );
      }
    }
    
    export default App;

CodePudding user response：

For each onChange, you can get the changed value from e.target.value

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props){
    super();
    this.state = {
      uname : "",
      email : "",
      pw : "",
      submitted: false,
    }
  }

  
  handlePasswordChange = (e) => {
    this.setState({
      pw: e.target.value
    })
  }

  handleUsernameChange = (e) => {
    this.setState({
      uname: e.target.value
    })
  }

  handleEmailChange = (e) => {
    this.setState({
      email: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      submitted: true,
    })
    console.log(this.state)
  }
    render() {
        return (
            <div className="App">
                <form onSubmit={this.handleSubmit}>
          <label>Username</label>
          <input type='text' value={this.state.uname} onChange={this.handleUsernameChange} name='uname'/>
          <br />
          <label>Email</label>
          <input type='text' value={this.state.email} onChange={this.handleEmailChange} name='email'/>
          <br />
          <label>Password</label>
          <input type='password' value={this.state.pw} onChange={this.handlePasswordChange} name='pw'/>
          <br />
          <button type='submit'>Submit</button>
        </form>
        {this.state.submitted && (
          <>
          <h2>Username: {this.state.uname}</h2>
          <h2>Email: {this.state.email}</h2>
          <h2>Password: {this.state.pw}</h2>
          </>
        )}
            </div>
        );
    }
}

export default App;