Enable Disable input with button in reactJS / nextJS

Question

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;

rastiq · Accepted Answer · 2022-06-15 20:35:59Z

5

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

edited Jun 15, 2022 at 20:35

answered Jun 15, 2022 at 20:33

rastiq

3831 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

Enable Disable input with button in reactJS / nextJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related