useState(false) is not working when i use Lifting State Up

user_16012261 0
Viewed 74

the first code is a common ancestor component and i passed props to Layout component. and the result is always true. but i want it to be false as default. and i want to change it to true when i use handleOnClick what did i make it wrong??
if it's not unclear explanation, tell me please . 

import React, { useState } from "react";
import "./App.css";
import Sidebar from "./Components/Sidebar";
import Layout from "./pages/LayOut/Layout";
import ChartType from "./pages/ChartType/ChartType";
import Home from "./pages/Home";
import Datasetting from "./pages/Datasetting";
import View from "./pages/View";
import { Switch, Route } from "react-router-dom";
function App() {
  const [showPanel, setShowPanel] = useState(false); // this one
  const [showPanel1, setShowPanel1] = useState(false);

  return (
    <div className="App">
      <Sidebar />
      <Switch>
        <Route path="/home" exact>
          <Home />
        </Route>
        <Route path="/layout">
          <Layout
            showPanel={showPanel}
            setShowPanel={setShowPanel}
            showPanel1={showPanel1}
            setShowPanel1={setShowPanel1}
          />

import Panel from "./Panel";
import PanelTwo from "./PanelTwo";
import styled from "styled-components";
export default function Layout({
  showPanel,
  setShowPanel,
  showPanel1,
  setShowPanel1,
}) {
  const handleOnClick = () => {
    setShowPanel(true);
    setShowPanel(false);
  };
  const handleOnClick1 = () => {
    setShowPanel1(true);
    setShowPanel(false);
  };

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
        </div>
problem solved ! thanks a lot u guys taking the time for answering !! i hope u guys have a good day !!

reactjs
2 Answers

In the handleClick you are setting the setShowPanel(true) and again setShowPanel(false) looks like minor typo. You are not updating the state of setShowPanel1 .

 const handleOnClick = () => {
  setShowPanel(true);
  setShowPanel1(false);
};
user_88843880 
import React, { useState } from "react";
import "./App.css";
import Sidebar from "./Components/Sidebar";
import Layout from "./pages/LayOut/Layout";
import ChartType from "./pages/ChartType/ChartType";
import Home from "./pages/Home";
import Datasetting from "./pages/Datasetting";
import View from "./pages/View";
import { Switch, Route } from "react-router-dom";
function App() {
  const [showPanel, setShowPanel] = useState(false); // this one
  const [showPanel1, setShowPanel1] = useState(false);

  const handleOnClick = () => {
    setShowPanel(!showPanel);
    setShowPanel1(!showPanel1);
  }; // dont need 2nd function with setting showPanel(1) with the bang operator, takes opposite of current value


  return (
    <div className="App">
      <Sidebar />
      <Switch>
        <Route path="/home" exact>
          <Home />
        </Route>
        <Route path="/layout">
          <Layout
            showPanel={showPanel}
            handleOnClick={handleOnClick}
            showPanel1={showPanel1}
          />

import Panel from "./Panel";
import PanelTwo from "./PanelTwo";
import styled from "styled-components";
export default function Layout({
  showPanel,
  showPanel1,
  handleOnClick
}) {

  return (
    <div>
      <Main>
        <div onClick={handleOnClick}>
          <h1>Panel (1+3)</h1>
       </div>
user_98261770
Related