CODEWITHSUNDEEP
javascriptreactjsformsonsubmit
bsmith
bsmith

Reputation: 103

How do I make the text from an input field appear on the screen after it is submitted?

I would like to take whatever is entered into the input field and have it display on the screen after the user clicks submit. I know this seems super basic, but I am new to React. Thanks ahead of time!

import React, { Component } from 'react';


class TextInput extends Component {
  constructor(props){
    super(props);
    this.state = { info: "", showName: false };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(evt) {
    evt.preventDefault();
    this.setState({ info: evt.target.value })
  }

  handleSubmit(evt){
    evt.preventDefault();
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.info}
            onChange={this.handleChange}/>

          <button>Submit</button>
        </form>

      //text from input appears here
      </div>
    );
  }

}

export default TextInput;

Upvotes: 0

Views: 51

Answers (2)

ravibagul91
ravibagul91

Reputation: 20755

You already has state like,

this.state = { info: "", showName: false };

You can use showName state to show your text,

return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.info}
            onChange={this.handleChange}/>

          <button>Submit</button>
        </form>

        //text from input appears here
        {this.state.showName && <div>{this.state.info}</div>}

      </div>
    );

And your handleSubmit function should be,

handleSubmit(evt){
    evt.preventDefault();
    this.setState({showName:true})
}

Upvotes: 0

Moe
Moe

Reputation: 3713

If I understand correctly, you only want to display the text after the user clicks submit. In this case, you can use handleSubmit to set a special value in the state submittedInfo for example, and then display that value.

import React, { Component } from 'react';


class TextInput extends Component {
  constructor(props){
    super(props);
    this.state = { info: "", submittedInfo: "", showName: false };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(evt) {
    evt.preventDefault();
    this.setState({ info: evt.target.value })
  }

  handleSubmit(evt){
    evt.preventDefault();
    this.setState({submittedInfo: this.state.info})
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.info}
            onChange={this.handleChange}/>

          <button>Submit</button>
        </form>

        //text from input appears here
        <div>{this.state.submittedInfo}</div>
      </div>
    );
  }

}

export default TextInput;

Another approach could be to store in the state a boolean isSubmitted, signifying whether or not the user has submitted the form, and then displaying this.state.info if isSubmitted is true

Upvotes: 2

Related Questions