How to switch classes onClick

thank you for reading this. I am attempting to learn React by making a dummy website, however I’ve run into a roadblock.

I want the "display-page" div to only show the Send element initially (which is easy) but when someone clicks one of the 4 options from the content_bar div I want remove the current element and only show the newly clicked element (in this case it is ‘Transactions’)

I’ve read about useState and routing but I’m not sure how to implement

Thanks! Please let me know if I didnt give enough details

import React, { Component } from 'react';

import './Data.css';
import Transactions from './Transactions';
import Send from './Send';



class Data extends Component {

    constructor(props) {
        super(props);
        this.state = {
            content: <Send />
        }
      }

      transactionpage = () => {
            this.setState({content: <Transactions/>});
      }

    
    render() {

        return(
            <div className="content">
                <div className="content_bar">
                    <h5>Send</h5>
                    <h5 onClick={this.transactionpage}>Transactions</h5>
                    <h5>Friends</h5>
                    <h5>Professional</h5>
                </div>
                <div className="display-page">
                  {this.state.content}
                </div>
            </div>
        );
    }
}

export default Data;

Answer

Looking at You can’t press an <h5> tag and React code without state feels strange.

You need to learn more to achieve your goal, these are the topics:

  • JSX expresssion
  • Conditional rendering
  • State management

Let me show you my solution, it is one of many ways.

class Data extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toDisplay: ''
    };
    this.changeToDisplay = this.changeToDisplay.bind(this);
  }
  changeToDisplay(e) {
    this.setState({ toDisplay: e.target.textContent.toString() });
  }
  render() {
    return (
      <div className="content">
        <div className="content_bar">
          <button onClick={e => changeToDisplay(e)}>Send</button> <br />
          <button onClick={e => changeToDisplay(e)}>Transactions</button> <br />
          <button>Friends</button> <br />
          <button>Professional</button> <br />
        </div>
        <div className="display-page">
          {this.state.toDisplay === 'Send' ? <Send /> : null}
          {this.state.toDisplay === 'Transactions' ? <Transactions /> : null}
        </div>
      </div>
    );
  }
}