ReactJS onClick in list item chage div

Question

i am working on react on-click event I have a list and I wanna set onClick event when a list item is clicked. and show <div> of particular list

CODE:

import React from "react";
    import { Container, Grid,Accordion } from "semantic-ui-react";
    
    
    class Powerups extends React.Component{
       constructor(props){
        super(props);
        this.state={
          activeIndex: 1
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
       }
       componentWillMount() {}
       componentWillUnmount() {}
       componentDidMount() {}
       componentWillReceiveProps(nProps) {}
       
     
        handleClick(index) {
            const { activeIndex } = this.state
            const newIndex = activeIndex === index ? -1 : index
            this.setState({ activeIndex: newIndex })
        }
        handleChange(){
            
        }
    
    
        render() {
            const { activeIndex } = this.state
            return(
    
                <div className="powerups-root">
                   
    
                    <div style={{background: '#fff'}}>
                    <Container className="power-header-image">
                        <div style={{textAlign: 'center',marginTop: 32}}>
                        <h1><span style={{color: '#FF6701',fontWeight :'bold'}}>STACKBY POWERUPS</span></h1>
                        <h2><span style={{fontWeight :'bold'}}>Use powerups to make your lives easier.</span></h2>
                        </div>
                    </Container>
                    </div> 
    
            <Container style={{marginBottom: 75}}>
              <Grid>
                <Grid.Column mobile={16} tablet={4} computer={4}>
                  <div className="sidebar-bx">
                      <div className="sidebar-title">
                        <h2>categories</h2>
                      </div>
                      <ul className="sidebar-items" id="tags">
                        <li id="All"><span style={{ textDecoration: 'underline' }}>All</span></li> 
                        <li id="Import"><span>Import</span></li>
                        <li id="Sharing"><span>Sharing</span></li>
                        <li id="Data Recovery"><span>Data Recovery</span></li>
                        <li id="Data Transformation"><span>Data Transformation</span></li>
                        <li id="Automation"><span>Automation</span></li>
                        <li id="Apps"><span>Apps</span></li>
                      </ul>
                  </div>
                </Grid.Column>
                <Grid.Column container mobile={16} tablet={12} computer={12} container className="powerup" style={{marginLeft:'0px !important',height: 'fit-content', width: '100%'}}>
              
                  <Accordion className="stack-links">
                    <div className="card" id="Data Recovery">
                        <ul>
                            <li>
                            <Accordion.Title className="flex items-center" active={activeIndex === 1} index={1} onClick={() => this.handleClick(1)}>
                            Stack Export
                            </Accordion.Title>
                            </li>
                            <li>
                            <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                            Live
                            </a> 
                            </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 1}>
                          <p>Export your complete stack back in an excel sheet .</p>
                        </Accordion.Content>
                    </div>
                    <div className="card" id="Data Transformation">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 2} index={2} onClick={() => this.handleClick(2)}>
                        Append CSV file in an existing table
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 2}>
                          <p>Import a CSV file into an existing table and map the columns to take the form of your table.</p>
                        </Accordion.Content>
                    </div>
                    <div className="card" id="Import">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 3} index={3} onClick={() => this.handleClick(3)}>
                        Google Sheet Importer
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#FF6701', border: '2px solid #FF6701',marginLeft:'10px', paddingBottom: '1px' }}>
                          Coming soon     
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 3}>
                          <p>Connect your Google Sheet Account and import your sheets data directly into your stacks.</p>
                        </Accordion.Content>
                    </div>         
                    <div className="card" id="Import">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 4} index={4} onClick={() => this.handleClick(4)}>
                        Microsoft Excel Importer
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 4}>
                          <p>Import an excel file to create a new stack or import it to a table.</p>
                        </Accordion.Content>
                    </div>          
                    <div className="card" id="Sharing">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 5} index={5} onClick={() => this.handleClick(5)}>
                        View level sharing
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 5}>
                          <p>Share individual views with anyone in your team - only share filtered rows, or even hide columns.</p>
                        </Accordion.Content>
                    </div>  
                    <div className="card" id="Data Recovery">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 6} index={6} onClick={() => this.handleClick(6)}>
                        Recycle Bin
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 6}>
                          <p>Recover deleted items (Tables, Views, Rows and Columns) from last 7 days.</p>
                        </Accordion.Content>
                    </div>   
                    <div className="card" id="Data Transformation">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 7} index={7} onClick={() => this.handleClick(7)}>
                        Deduplication
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#FF6701', border: '2px solid #FF6701',marginLeft:'10px', paddingBottom: '1px' }}>
                          Coming soon
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 7}>
                          <p>Import data and manage duplicate rows in the same table.</p>
                        </Accordion.Content>
                    </div>     
                    <div className="card" id="Automation">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 8} index={8} onClick={() => this.handleClick(8)}>
                        Automate your API column type
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 8}>
                          <p>Set automated schedules (daily, 3 days, weekly, biweekly, monthly) on your API column type and keep yourself up to date at all times. Note: Please check total limits based on your plan.</p>
                        </Accordion.Content>
                    </div>    
                    <div className="card" id="Apps">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 9} index={9} onClick={() => this.handleClick(9)}>
                        Google Drive Sync
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 9}>
                          <p>Sync your stacks directly with your Google Drive Account and open/create stacks from Google Drive.</p>
                        </Accordion.Content>
                    </div>
                    <div className="card" id="Apps">
                      <ul>
                        <li>
                        <Accordion.Title className="flex items-center" active={activeIndex === 10} index={10} onClick={() => this.handleClick(10)}>
                        Google Chrome Extension
                        </Accordion.Title>
                        </li>
                        <li>
                        <a className="live-lable" style={{ color: 'white', background: '#4FAD35', border: '2px solid #4FAD35',marginLeft:'10px', paddingBottom: '1px' }}>
                          Live
                        </a> 
                        </li>
                        </ul>
                        <Accordion.Content active={activeIndex === 10}>
                          <p>Clip information from any webpage, through a custom google chrome extension <a href="#">Download it from here</a>.</p>
                        </Accordion.Content>
                    </div>     
                </Accordion>
    
                
                </Grid.Column>
            </Grid>
    
              
                  </Container>
    
           
    
           </div>
            )
        }
    }
    
    const mapStateToProps = ({ auth }) => {
        return { auth }
    }
    
    export default connect(mapStateToProps, {})(Powerups);

i want that when i click on particular category like import then it show import div

so, i don't getting idea of this, i will newly try this any one help please

Thanks!

Answer 1

You can create an array of objects for your list items and then pass the list info to the child component and display contents.

Here is a working example on how to achieve your goal,

Code Sandbox => https://codesandbox.io/s/frosty-bird-vqzzp?file=/src/App.js:0-892

import React, { useState } from "react";

import "./styles.css";

const listItems = [
  { id: "0", title: "One", content: " I AM ONE" },
  { id: "1", title: "Two", content: " I AM TWO" },
  { id: "2", title: "Three", content: " I AM THREE" }
];

const ListView = ({listId}) => {
  const listView = listItems.map((item) => {
    if (item.id === listId) {
      return <span>{item.content}</span>;
    }
  });

  return <div>{listView}</div>;
};

const App = () => {
  const [showListView, setShowListView] = useState(false);
  const [listId, setListId] = useState(null);

  const listClickHandler = (id) => {
    setListId(id);
  };

  const list = listItems.map((item) => {
    return <li onClick={() => listClickHandler(item.id)}>{item.title}</li>;
  });

  return (
    <div className="App">
      <ul>{list}</ul>

      <ListView listId={listId} />
    </div>
  );
};

export default App;