JAVASCRIPT

class component react using state

import React, {Component} from 'react';
import './App.css';
import IconBar from './components/icon-bar';
import Events from './components/events';

class App() extends Component {
  constructor(props) {
        super(props)
        this.state = {
            mode: null
        }
        this.updateMode = this.updateMode.bind(this);
    }

  updateMode = (newMode) => {

      this.setState({mode: newMode});
  }


  return (
    <div className="App">
      <h1 className="Title">ENAKS</h1>
      <IconBar onUpdateMode={this.updateMode}  mode={this.state.mode} />
      <Events />
  <div className="mainModeFrame"><p1>{this.state.mode}</p1></div>
    </div>
  );
}

export default App;
Add this to your knowledge

how to create state in class component

const [state, setState] = useState('intialValue')

react state

import React, { Component } from "react";

class Counter extends Component {
	// you can either initialize state inside constructor
  	constructor() {
		super();
		this.state = {
			count: 1,
			tags: ["tag1", "tag2", "tag3"],
		};
	}
  	// or initialize the state as class field declaration
  	state = {
		count: 1,
		tags: ["tag1", "tag2", "tag3"],
	};
}

set state

setState({ searchTerm: event.target.value })

react state

import React from 'react';

const App = () => {
  const accordionData = {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
  };

  const { title, content } = accordionData;

  return (
    <React.Fragment>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        <div className="accordion-item">
          <div className="accordion-title">
            <div>{title}</div>
            <div>+</div>
          </div>
          <div className="accordion-content">{content}</div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default App;

React state

  const [customers, setCustomers] = useState([]);
  const [nextPageURL, setNextPageURL] = useState('');

react state

<div className="accordion">
  <div className="accordion-item">
    <div
      className="accordion-title"
      onClick={() => setIsActive(!isActive)}
    >
      <div>{title}</div>
      <div>{isActive ? '-' : '+'}</div>
    </div>
    {isActive && <div className="accordion-content">{content}</div>}
  </div>
</div>