// State is essentially a global class variable<br /> // that is modified when the component updates</p> <p>class Clock extends React.Component {<br /> constructor(props) {<br /> super(props);<br /> this.state = {date: new Date()};<br /> }</p> <p> render() {<br /> return (<br /> <div><br /> <h1>Hello, world!</h1><br /> <h2>It is {this.state.date.toLocaleTimeString()}.</h2><br /> </div><br /> );<br /> }<br /> }

class BalanceInquiry extends Component {<br /> constructor(props) {<br /> super(props);<br /> this.state = {<br /> totalIncome: 0,<br /> };<br /> }</p> <p> render() {<br /> return <div>totalIncome {this.state.totalIncome}</div>;<br /> }<br /> }<br />

import React, { Component } from “react”;</p> <p>class Counter extends Component {<br /> // you can either initialize state inside constructor<br /> constructor() {<br /> super();<br /> this.state = {<br /> count: 1,<br /> tags: [“tag1”, “tag2”, “tag3”],<br /> };<br /> }<br /> // or initialize the state as class field declaration<br /> state = {<br /> count: 1,<br /> tags: [“tag1”, “tag2”, “tag3”],<br /> };<br /> }

The state is a built-in React object that is used to contain data or information about the component.<br /> A component’s state can change over time; whenever it changes, the component re-renders.

import React from ‘react’;</p> <p>const App = () => {<br /> const accordionData = {<br /> title: ‘Section 1’,<br /> content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente<br /> laborum cupiditate possimus labore, hic temporibus velit dicta earum<br /> suscipit commodi eum enim atque at? Et perspiciatis dolore iure<br /> voluptatem.`<br /> };</p> <p> const { title, content } = accordionData;</p> <p> return (<br /> <React.Fragment><br /> <h1>React Accordion Demo</h1><br /> <div className=”accordion”><br /> <div className=”accordion-item”><br /> <div className=”accordion-title”><br /> <div>{title}</div><br /> <div>+</div><br /> </div><br /> <div className=”accordion-content”>{content}</div><br /> </div><br /> </div><br /> </React.Fragment><br /> );<br /> };</p> <p>export default App;

const [customers, setCustomers] = useState([]);<br /> const [nextPageURL, setNextPageURL] = useState(”);

<div className=”accordion”><br /> <div className=”accordion-item”><br /> <div<br /> className=”accordion-title”<br /> onClick={() => setIsActive(!isActive)}<br /> ><br /> <div>{title}</div><br /> <div>{isActive ? ‘-‘ : ‘+’}</div><br /> </div><br /> {isActive && <div className=”accordion-content”>{content}</div>}<br /> </div><br /> </div>