Help with React Toggle for Portfolio

Hi There,

Just wondered if anyone could help with a Toggle function in React. I have 6 components and a main view with text and a thumbnail grid. When the thumb for that project is clicked it hides the main view and shows the selected project component, then clicked again will close the component and show the main view again. Each thumb has been passed an onClick event passing the event.target.id to match to the state in the toggleMain function below. On first click it works and changes the main state to false and corresponding component state to true, however on second click it will not change the state for the component to false, it only changes main to true and I can’t figure out why it will only toggle the component on the first click.

Any advice would be awesome

Thanks so much
Alphie

class PortfolioComponent extends Component {
  constructor(props){
    super(props)
    this.state = {
      main: true,
      lml:  false,
      ppd: false,
      lk: false,
      fode: false,
      south: false,
      forager: false,
    }
    this.toggleMain = this.toggleMain.bind(this)
  }

  toggleMain(event) {
    event.preventDefault()
    console.log(event.target.id)
    const name = event.target.id
    console.log(name)
    this.setState(
      {
       main: !this.state.main,
       [name]: !this.state.name
      },
    )
  }

{*/Thumbnail*/}
export const FODE = (props) => {
  console.log(props)
  return (
    <FodeThumb id='fode' onClick={props.toggleMain}>

I don’t see name declared in your state