JAVASCRIPT

controlled input

import { useState } from "react";
function MyControlledInput({}) {
  const [value, setValue] = useState("");

  const onChange = (event) => {
    setValue(event.target.value);
  };

  const restInputValue = () => {
    setValue("");
  };

  return (
    <>
      <div>Input value: {value}</div>
      <input value={value} onChange={onChange} />
      {/* This one will not reset the input value */}
      <input onChange={onChange} />
      <button onClick={restInputValue}>rest input value</button>
    </>
  );
}

export default MyControlledInput;

react controlled input

import { useState } from 'react';
function MyControlledInput({ }) {
  const [value, setValue] = useState('');
  const onChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <>
      <div>Input value: {value}</div>
      <input value={value} onChange={onChange} />
    </>
  );
}

react controlled input

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <div>
        <input type="text" value={this.state.name} onChange={this.handleNameChange} />
      </div>
    );
  }
}