CODEWITHSUNDEEP
javascriptreactjs
dealwap
dealwap

Reputation: 671

React update input value on button click

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>  
 )
}

Upvotes: 4

Views: 21372

Answers (6)

hasha hashara
hasha hashara

Reputation: 42

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>
        )
    }
}

Upvotes: 0

umesh kumar bedi
umesh kumar bedi

Reputation: 330

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.

Upvotes: 0

Hải B&#249;i
Hải B&#249;i

Reputation: 2931

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>
    );
  }
}

Upvotes: 0

Omer
Omer

Reputation: 3466

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;

Upvotes: 3

Dacre Denny
Dacre Denny

Reputation: 30360

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 />

Upvotes: 1

Sameer Reza Khan
Sameer Reza Khan

Reputation: 464

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>
        )
    }
}

Upvotes: 1

Related Questions