Enable Disable input with button in reactJS / nextJS

June 15, 2022

I have a condition like this.
I want to enable text input if the button is pressed and can edit the text in it.
the question is how to make the function in react js?

my Code:

function App() {
  return (
    <div className="App">
      <label>URL : </label>
      <input
        placeholder='http://localhost:3000/123456'
        disabled
      />
      <button type='submit'>Active</button>
    </div>
  );
}

export default App;

>Solution :

Use useState hook and onClick event like in this example.

import React, { useState } from "react";

function App() {
  const [active, setActive] = useState(false)
  
  return (
    <div className="App">
      <label>URL : </label>
      <input
        placeholder='http://localhost:3000/123456'
        disabled={!active}
      />
      <button 
        type='submit' 
        onClick={() => setActive(!active)}
       >
        Active
      </button>
    </div>
  );
}