I have a scenario where I have 2 different components ( buttons and an info container). On each button click I am trying to display each matched info container. I am able to achieve the desired functionality in my buttons, but when I pass state back to my other component I am only able to display the matched index. My desired result is if I clicked a button in my nav and it has an active class all my "info container" should remain visible until the "active" class is toggled/removed.

JS:

...

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    "& > *": {
      margin: theme.spacing(1)
    }
  },
  orange: {
    color: theme.palette.getContrastText(deepOrange[500]),
    backgroundColor: deepOrange[500],
    border: "4px solid black"
  },
  info: {
    margin: "10px"
  },
  wrapper: {
    display: "flex"
  },
  contentWrapper: {
    display: "flex",
    flexDirection: "column"
  },
  elWrapper: {
    opacity: 0,
    "&.active": {
      opacity: 1
    }
  }
}));

const ToggleItem = ({ onChange, id, styles, discription }) => {
  const [toggleThisButton, setToggleThisButton] = useState(false);

  const handleClick = (index) => {
    setToggleThisButton((prev) => !prev);
    onChange(index);
  };

  return (
    <>
      <Avatar
        className={toggleThisButton ? styles.orange : ""}
        onClick={() => handleClick(id)}
      >
        {id}
      </Avatar>
      {JSON.stringify(toggleThisButton)}
      {/* {toggleThisButton && <div className={styles.info}>{discription}</div> } */}
    </>
  );
};

const ToggleContainer = ({ discription, className }) => {
  return <div className={className}> Content {discription}</div>;
};

export default function App() {
  const data = ["first", "second", "third"];
  const classes = useStyles();
  const [value, setValue] = useState(false);

  const handleChange = (newValue) => {
    setValue(newValue);
    console.log("newValue===", newValue);
  };

  return (
    <>
      <div className={classes.wrapper}>
        {data.map((d, id) => {
          return (
            <div key={id}>
              <ToggleItem
                id={id}
                styles={classes}
                discription={d}
                onChange={handleChange}
              />
            </div>
          );
        })}
      </div>
      <div className={classes.contentWrapper}>
        {data.map((d, id) => {
          return (
            <ToggleContainer
              className={
                value === id
                  ? clsx(classes.elWrapper, "active")
                  : classes.elWrapper
              }
              key={id}
              styles={classes}
              discription="Hello"
            />
          );
        })}
      </div>
    </>
  );
}
 

Codesanbox: https://codesandbox.io/s/pedantic-dream-vnbgym?file=/src/App.js:0-2499

CodePudding user response：

Codesandbox : https://codesandbox.io/s/72166087-zu4ev7?file=/src/App.js

You can store the selected tabs in a state. That way you don't need to render 3 (or more) <ToggleContainer>. In <ToggleContainer> pass the selected tabs as props and render the selected tabs content in <ToggleContainer>.

import React, { useState } from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import { deepOrange } from "@material-ui/core/colors";
import clsx from "clsx";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    "& > *": {
      margin: theme.spacing(1)
    }
  },
  orange: {
    color: theme.palette.getContrastText(deepOrange[500]),
    backgroundColor: deepOrange[500],
    border: "4px solid black"
  },
  info: {
    margin: "10px"
  },
  wrapper: {
    display: "flex"
  },
  contentWrapper: {
    display: "flex",
    flexDirection: "column"
  },
  elWrapper: {
    opacity: 0,
    "&.active": {
      opacity: 1
    }
  }
}));

const ToggleItem = ({ onChange, id, styles, discription }) => {
  const [toggleThisButton, setToggleThisButton] = useState(false);

  const handleClick = (index) => {
    onChange(discription, !toggleThisButton);
    setToggleThisButton((prev) => !prev);
  };

  return (
    <>
      <Avatar
        className={toggleThisButton ? styles.orange : ""}
        onClick={() => handleClick(id)}
      >
        {id}
      </Avatar>
      {JSON.stringify(toggleThisButton)}
      {/* {toggleThisButton && <div className={styles.info}>{discription}</div> } */}
    </>
  );
};

const ToggleContainer = ({ className, selected }) => {
  return (
    <div className={className}>
      {selected.map((item, idx) => (
        <div key={idx}>Content {item}</div>
      ))}
    </div>
  );
};

export default function App() {
  const data = ["first", "second", "third"];
  const classes = useStyles();
  const [selected, setSelected] = useState([]);

  // action : False -> Remove, True -> Add
  const handleChange = (val, action) => {
    let newVal = [];
    if (action) {
      // If toggle on, add content in selected state
      newVal = [...selected, val];
    } else {
      // If toggle off, then remove content from selected state
      newVal = selected.filter((v) => v !== val);
    }
    console.log(newVal);
    setSelected(newVal);
  };

  return (
    <>
      <div className={classes.wrapper}>
        {data.map((d, id) => {
          return (
            <div key={id}>
              <ToggleItem
                id={id}
                styles={classes}
                discription={d}
                onChange={handleChange}
              />
            </div>
          );
        })}
      </div>
      <div className={classes.contentWrapper}>
        <ToggleContainer styles={classes} selected={selected} />
      </div>
    </>
  );
}