Change text value on button click

Question

I am new in REACT JS so while making an app I am stuck at this part where i want to change h1 value when the button is clicked

import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';

function App() {

return (
<Container>
    
<Row className="Row">
  <div className="frame">
 
    <h1>this text should change</h1>
       <Button className=" btn btn1" color="light">YES</Button> // this button should change the text
       <Button className=" btn btn2" color="light">NO</Button>
  </div>
</Row>

</Container>
);
}

export default App;

Answer 1

Never access the real DOM. Use states and render it the React way.

I would generally use a state to change something - refer Using the State Hook . And then render it out. Create this:

const [Text, setText] = useState("this text should change");

Render it:

<h1>{Text}</h1>

Use the event handler and use a type="button" so that it doesn't refresh the page:

  <Button
    className=" btn btn1"
    color="light"
    type="button"
    onClick={() => {
      setText("Praveen is awesome! You clicked on YES button!");
    }}
  >
    YES
  </Button>
  {/*// this button should change the text*/}
  <Button
    className=" btn btn2"
    color="light"
    type="button"
    onClick={() => {
      setText("Praveen is awesome! You clicked on NO button!");
    }}
  >
    NO
  </Button>

Now see the magic: https://557w4.csb.app/

Code:

import Button from "react-bootstrap/Button";
import "./App.css";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { useState } from "react";

function App() {
  const [Text, setText] = useState("this text should change");
  return (
    <Container>
      <Row className="Row">
        <div className="frame">
          <h1>{Text}</h1>
          <Button
            className=" btn btn1"
            color="light"
            type="button"
            onClick={() => {
              setText("Praveen is awesome! You clicked on YES button!");
            }}
          >
            YES
          </Button>
          {/*// this button should change the text*/}
          <Button
            className=" btn btn2"
            color="light"
            type="button"
            onClick={() => {
              setText("Praveen is awesome! You clicked on NO button!");
            }}
          >
            NO
          </Button>
        </div>
      </Row>
    </Container>
  );
}

export default App;

Preview

Full CodeSandBox: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js

Answer 2

In this case, you have to use the hook state ( Documentation ).

So, first of all you have to import the useState hook, then create it and finally use it.

So, your code will be something like that:

import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { useState } from 'react';

function App() {

  const [text, setText] = useState("this text should change");

  return (
    <Container>
    
    <Row className="Row">
      <div className="frame">
 
      <h1>{text}</h1>
        <Button className=" btn btn1" color="light" onClick={e => setText("new text")}>YES</Button> // this button should change the text
        <Button className=" btn btn2" color="light">NO</Button>
     </div>
    </Row>

   </Container>
  );
}

export default App;