React update input value on button click

Question

I have a React component with an input field.

I want to update the value of the input field when a button is clicked, I can confirm that the value changes when I inspect element but it doesn't display in the input field. Below is a sample code to just to give an idea.

class InputField {
 constructor(props) {
  super(props)
 }
 state = {
  userInput: ''
 }
}

onClick = () => {
 this.setState({
  userInput: 'Test'
 })
}


render() {
 return ( <input value={this.state.userInput} name="sampleInput" />
  <button onClick={this.onClick}> Click me </button>  
 )
}

@saurssaurav it's just an example to illustrate what he's trying to achieve — Dacre Denny
– Dacre Denny, Commented Sep 18, 2019 at 10:14

Omer · Accepted Answer · 2019-09-18 10:24:20Z

3

Fix syntax

your code is ok, just little order.

I add the whole component

import React, { Component } from 'react';

class InputField extends Component {
  constructor(props) {
    super(props)
  }

  state = {
    userInput: ''
  }

  onClick = () => {
    this.setState({
      userInput: 'Test'
    })
  }

  render() {
    return (
      <div>
        <input value={this.state.userInput} name="sampleInput" />
        <button onClick={this.onClick}>Click me</button>
      </div>
    )
  }
}

export default InputField;

answered Sep 18, 2019 at 10:24

Omer

3,5262 gold badges21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akaisteph7 Over a year ago

This doesn't explain what the actual issue was. Just the extra } after state = and the missing <div> in the return it seems.

Sameer Reza Khan · Accepted Answer · 2019-09-18 10:19:03Z

1

I just removed syntax error in your example and it worked for me.

import React from 'react';

export default class InputField extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userInput: ''
        }
    }

    onClick = () => {
        this.setState({
            userInput: 'Test'
        })
    }


    render() {
        return (
            <div>
                <input value={this.state.userInput} name="sampleInput"/>
                <button
                    onClick = {this.onClick} 
                >
                    Click me
                </button>
            </div>
        )
    }
}

answered Sep 18, 2019 at 10:19

Sameer Reza Khan

4795 silver badges17 bronze badges

Comments

Dacre Denny · Accepted Answer · 2019-09-18 10:21:58Z

One approach would be to implement this as a functional component via hooks. You could for instance use the state hook to store and render the userInput data as shown below:

import React from "react";

/* Declare functional InputField component */
function InputField () {

  /* Define local state hook to store the "user input" data */
  const [userInput, setUserInput] = React.useState("");

  const onClick = (e) => {
      /* Prevent button click's default behavior */
      e.preventDefault();
      /* Call the state's "setter" method to update "userInput" state */
      setUserInput('Test')
  }

   /* Render both input and button in a <> fragment */    
   return (<>
     <input value={this.state.userInput} name="sampleInput"/>
     <button onClick={onClick}>Click me</button>  
   </>)
}

To use this component, simply render it as:

<InputField />

Hải Bùi · Accepted Answer · 2019-09-18 10:24:55Z

0

I just fix your syntax errors and it run no any error

class InputField extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
         userInput: '',
     };
  }

  onClick = () => {
    this.setState({
      userInput: 'Test',
    });
  };

  render() {
    return (
      <div>
        <input value={this.state.userInput} name="sampleInput" />
        <button onClick={this.onClick}>Click me</button>
      </div>
    );
  }
}

answered Sep 18, 2019 at 10:24

Hải Bùi

2,9612 gold badges12 silver badges19 bronze badges

Comments

umesh kumar bedi · Accepted Answer · 2023-05-06 08:32:53Z

0

Using defaultValue attribute

const [name, setName] = useState("")

<input defaultValue={name} placeholder='Enter Name' onChange={(e) => setName(e.target.value)} />

<button onClick={()=>setName("Umesh Bedi")}>Add Name</button>

I hope, It will help someone in functional component.

edited May 6, 2023 at 8:32

answered May 6, 2023 at 8:25

umesh kumar bedi

3303 silver badges6 bronze badges

Comments

Adrian Mole · Accepted Answer · 2024-01-29 13:31:22Z

0

import React from 'react';

export default class InputField extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userInput: ''
        }
    }

    onClick = () => {
        this.setState({
            userInput: 'Test'
        })
    }


    render() {
        return (
            <div>
                <input value={this.state.userInput} name="sampleInput"/>
                <button
                    onClick = {this.onClick} 
                >
                    Click me
                </button>
            </div>
        )
    }
}

edited Jan 29, 2024 at 13:31

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Jan 29, 2024 at 7:51

hasha hashara

403 bronze badges

1 Comment

Adrian Mole Over a year ago

I can see no difference between this code and that in another answer. Either highlight the difference(s) or delete the post.

Collectives™ on Stack Overflow

React update input value on button click

6 Answers 6

Fix syntax

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Fix syntax

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related