Change Rendered Component on Button Click React Hook

Question

Problem

I am trying to make a dashboard where at the top I have 3 buttons. When you click one of the three buttons the content of the dashboard is supposed to change aka render a new component. I have a button group component and 2 other components. One being GenericDashbord and the other being BasicCountMetrics. I'm hoping that what ever button is clicked within the button group component decides which component is rendered in my index.js.

Source Code

Button Group

import ReactDOM from 'react-dom';

import 'normalize.css/normalize.css'; // Reset browser CSS
import '../../styles/components/styles.scss';
import '../../styles/components/buttonGroup.scss';

// import DataTable from "./components/DataTables/DataTable";

// import DashNav from "./components/menus/DashNav";


import $ from "jquery";
import DashNav from '../menus/DashNav';
import CountMetrics from "../containers/BasicCountMetrics";
import DataTable from "../DataTables/DataTable";
import BasicCountMetrics from '../containers/BasicCountMetrics';

export var DATACHOICE = "BASIC";

const DATA_TYPE_STORAGE = "DATA_TYPE_STORAGE";

const initialState = { dataSet: "BASIC" }
const reducer = (state, newState) => ({
  ...state,
  dataSet: newState.dataSet
})

var init = localStorage.getItem(DATA_TYPE_STORAGE);
var initV = "BASIC";
if(init){
  initV = init;
  DATACHOICE = init;
}

const ButtonGroup = () => {
  const [state, setState] = useReducer(reducer, initialState)

  useEffect(() => {
      // console.log("dataset", dataset);
      $(document).ready(function(){
          $('.ui.button.toggle').state();
          // $('#btnGroup').tab();
          // var s = $('.ui.button.toggle').state();
      })
      // console.log("DATACHOICE", DATACHOICE);
      // storeDataset(DATACHOICE);
      var val = state.dataSet;
      if(val){
        localStorage.setItem('DATA_TYPE_STORAGE', val);
      }
      else{
        localStorage.setItem('DATA_TYPE_STORAGE', initialState);
      }
  }, []);


  const changeData = event => {
    var c = "optionsC"
    // var target = event.target.id
    // var t = target.toString();
    // console.log("t", event.target.value);
    // if(event.target.value == "basic"){
    // console.log("tt", t)
    // }
    // switch(event.target.value) {
    //     case "basic":
    //         c = "BASIC"
    //         // return c = "baseBtn"
    //     case "power":
    //         c = "POWER"
    //         // return c = "powerEnvBtn"
    //     case "metrics":
    //         c = "METRICS"
    //         // return c = "metricBtn"
    //     default:
    //         c = "default Options"
    //         // return c = "default Options"
    // }

    // $("#bodyCont").html(<BasicCountMetrics/>);
    // $('#btnGroup').tab();
    setState({dataSet: event.target.value});
    var vall = toString(event.target.value)
    localStorage.setItem(DATA_TYPE_STORAGE, vall);
    DATACHOICE = event.target.value;
  };

    console.log("dataset", state);
    var d = localStorage.getItem(DATA_TYPE_STORAGE);
    console.log("local", d);

    return (
      <div>
        <div id="btnGroup" class="three ui buttons blue inverted">
            <button id="baseBtn" class="ui button toggle" value="BASIC" onClick={changeData}>Baseline</button>
            <button id="powerEnvBtn" class="ui button toggle" value="POWER" onClick={changeData}>Power & Envrionment</button>
            <button id="metricsBtn" class="ui button toggle" value="METRICS" onClick={changeData}>Metrics</button>
        </div>
        {/* <div className="ui segment">Dataset value is: {state.dataSet}</div> */}
    </div>
    );
};

export default ButtonGroup;

Index.js

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

import 'normalize.css/normalize.css'; // Reset browser CSS
import './styles/components/styles.scss';
import DashNav from "./components/menus/DashNav";
import BasicCountMetrics from './components/containers/BasicCountMetrics';
import ButtonGroup, { DATACHOICE } from "./components/containers/ButtonGroupHooks";

// import $ from "jquery";

// const renderTab = (flag) => {
//     console.log("flag", flag);
//     if(flag=="BASIC"){
//         return <GenericMetrics/>
//     }
//     else if(flag=="POWER"){
//         return <BasicCountMetrics/>
//     }
//     // switch(flag){
//     //     case 'BASIC':
//     //         return <GenericMetrics/>
//     //     case 'POWER':
//     //         return <BasicCountMetrics/>
//     //     case 'METRICS':
//     //         return <div className="ui segment blue">HELLO</div>
//     // }
// }

const Dashboard = () => {
    var loc =  '';//localStorage.getItem('DATA_TYPE_STORAGE')
    
    useEffect(() => {
        // loc = localStorage.getItem('DATA_TYPE_STORAGE')
        // $(document).ready(function(){
        //     // $('.ui.buttons').on('click', function(){

        //     // });
        // });
        // DATACHOICE = loc;

    },[]);
    // const st = useState(0);
    // console.log("dashoard state", st);
    // console.log("dashoard Choice", DATACHOICE);

    // useEffect(() => {
    //     console.log("useEffectDash");
    //     console.log("das state", st);
    //     console.log("das Choice", DATACHOICE);
    // }, []);
    return (
        <div>
            <DashNav/>
                {/* <FancyNav /> */}
                {/* <MainNav /> */}
                {/* <DropNav /> */}
                {/* <h1>Welcome to the World</h1> */}
                {/* <img src="./images/navair.svg" alt="test" width="200px" height="200px"></img> */}
                {/* <div id="dataTableContainer" className="ui segment green inverted">
                    <TableExample/>
                </div> */}
            <div style={{textAlign: "center"}} className="ui segment mid inverted">
                <h1 class="ui center aligned text white"> Dashbaord</h1>
            </div>
            <ButtonGroup/>
            <div class="ui tab" data-tab="summary">
                <div className="ui segment blue">white</div>
            </div>
            <div class="ui tab" data-tab="edit">
                <div className="ui segment red">red</div>
            </div>
            <div class="ui tab" data-tab="edit">

            </div>

            {/* <div id="bodyCont">
                {renderTab(DATACHOICE)}
            </div> */}
            {/* <GenericMetrics /> */}
        </div>
    );
};


ReactDOM.render(<Dashboard />, document.getElementById('root'));

Question

How can I achieve this, I have tried useReducer, useState, localStorage and also tried simply creating tabs and none of it worked. Please help and thank you!

I just answered this same question yesterday: stackoverflow.com/a/57403070/1210271 — BugsArePeopleToo
– BugsArePeopleToo, Commented Aug 8, 2019 at 19:11
This looks like a simple app, so I seriously recommend to: 1) delete this code, 2) read Thinking in React multiple times, 3) go step by step and create first version of the app correctly. — Aprillion
– Aprillion, Commented Aug 8, 2019 at 19:47

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You need the Dashboard to handle state for you and then pass it down to the children. ButtonGroup calls the prop onSelectDashboard which the Dashboard receives and calls its setState. We then display the dashboard that is currently selected in the Dashboard's return function.

Dashboard

const [selectedDashboard, setSelectedDashboard] = useState('BASIC')

return (
  <div>
  ...
     <ButtonGroup onSelectDashboard={setSelectedDashboard} />
  ...
    {selectedDashboard === 'BASIC' && <GenericMetrics>}
    {selectedDashboard === 'POWER' && <BasicCountMetrics>}
    {selectedDashboard === 'METRICS' && <div className="ui segment blue">HELLO</div>}
  </div>
)

ButtonGroup

const ButtonGroup = ({onSelectDashboard}) => {
...
  const changeData = event => {
    onSelectDashboard(event.target.value)
  };
...
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 8, 2019 at 19:43

Jake Luby

1,7687 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change Rendered Component on Button Click React Hook

Problem

Source Code

Question

1 Answer 1

Dashboard

ButtonGroup

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Source Code

Question

1 Answer 1

Dashboard

ButtonGroup

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related