CODEWITHSUNDEEP
reactjsnext.js
Kia Kalista
Kia Kalista

Reputation: 411

Enable Disable input with button in reactJS / nextJS

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?

enter image description here

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;

Upvotes: 6

Views: 8120

Answers (1)

rastiq
rastiq

Reputation: 383

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

Upvotes: 5

Related Questions