Change headline text when clicking on multiple buttons in React

March 20, 2023

I’m not sure how to tackle this problem. I have two or more buttons and whenever I click on a button, I want my text to change. Any ideas?

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Change me!</h1>
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
  );
}

>Solution :

This is a very basic react question. I advice you to read the react documentation:

import "./styles.css";

function App() {
  const [text, setText] = useState("Change me!");

  return (
    <div className="App">
      <h1>{text}</h1>
      <button onClick={() => setText("button 1")}>Button 1</button>
      <button onClick={() => setText("button 2")}>Button 2</button>
      <button onClick={() => setText("button 3")}>Button 3</button>
    </div>
  );
}