Change text value on button click-CodePudding

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;

CodePudding user response：

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

I would generally use a state to change something - refer

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

CodePudding user response：

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;