I am attempting to get the input out of a textbox using ReactJS but am not sure how

import React from 'react'

class ponent extends React.Component {
    constructor() {
          super()
          this.state = {
          word: String('')

   }
  }

 increment() {
     this.setState({
     word: this.state.word += ''
 })
}

render() {
    return (
        <div>
            <p>The message is: { this.state.word } </p>
            <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} />
            <input type="submit" value="Add Word" onClick={() => this.increment()} />
            {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/}
        </div>

  )
 }
}

The text from the textbox should be added onto the message is:

I am attempting to get the input out of a textbox using ReactJS but am not sure how

import React from 'react'

class ponent extends React.Component {
    constructor() {
          super()
          this.state = {
          word: String('')

   }
  }

 increment() {
     this.setState({
     word: this.state.word += ''
 })
}

render() {
    return (
        <div>
            <p>The message is: { this.state.word } </p>
            <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} />
            <input type="submit" value="Add Word" onClick={() => this.increment()} />
            {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/}
        </div>

  )
 }
}

The text from the textbox should be added onto the message is:

• javascript
• reactjs

• 2 Possible duplicate of How to get value of textbox in React? – Danny Fardy Jhonston Bermúdez Commented Jan 30, 2017 at 17:03
• Ok I am not sure where to put the handleChange: function (evt) { this.setState({ textVal: evt.target.value.substr(0, 100) }); – jsomers89 Commented Jan 30, 2017 at 17:07
• After the render(){ ... }. – Danny Fardy Jhonston Bermúdez Commented Jan 30, 2017 at 17:15
• You should then delete the question and create more specific one. By the way, your current question is inplete, it ends with a colon. – revelt Commented Jan 31, 2017 at 11:54

2 Answers 2

You need two state variables, one will store the current value of textfield, and another one will store the plete value, and inside increment method append the textfield value to plete value and set it to '' again, Try this:

class HelloWidget extends React.Component {
    constructor() {
        super();
        this.state = {
            word: '',
            new: '',
        };
    }

    increment() {
        this.setState({
            word: this.state.word + this.state.new,
            new: '',
        })
    }

    handleChange(value) {
        this.setState({
            new: value
        });
    }

    render() {
        return (
            <div>
                <p>The message is: { this.state.word } </p>
                <input type="text" value={this.state.new} onChange={(e) =>this.handleChange(e.target.value)} />
                <input type="submit" value="Add Word" onClick={() => this.increment()} />
            </div>
        );
    }
}

Check the jsfiddle for working example: https://jsfiddle/hse607rr/

You need to add the handleChange method:

class ponent extends React.Component {
    constructor() {
        super()

        this.state = {
            word: ''
        };
    }

    increment() {
        this.setState({
            word: this.state.word + ''
        })
    }

    handleChange(value) {
        this.setState({
            word: value
        });
    }

    render() {
        return (
            <div>
                <p>The message is: { this.state.word } </p>
                <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} />
                <input type="submit" value="Add Word" onClick={() => this.increment()} />
                {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/}
            </div>
        );
    }
}