Toggleing a Component in React

Question

I have been trying to toggle two components on a button click in my app.

One is a Form component which loads up fine when I click the button, The other one is a Table Component which has the sorting part and the design of the table itself.

When I try to toggle onto Table component following errors generated:

My Toggle Component is like this:

import React, { Component } from "react";

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Caro from "./Carousel";
import { Carousel } from 'react-bootstrap';
import Tab from './Table';
import Form from './Form';

class Main extends Component {


state = { showing: true };

  render() {
    const { showing } = this.state;

    return (
      <div>
      <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
                 { showing
                     ? <Form / >
                     : <Tab />
                 }
             </div>



    );
  }
}

export default Main;

And my Table Component is like this:

import React, { Component } from 'react';
import { Table } from 'reactstrap';

class Tab extends React.Component {



  render() {
    const items = this.props.items;

    items.sort((a,b) => {
        const name1 = a.name.toLowerCase(), name2 = b.name.toLowerCase();
        return name1 === name2 ? 0 : name1 < name2 ? -1 : 1;
    });

  return (

      <Table striped>
             <thead>
               <tr>

                 <th  >Name</th>
                 <th>Origin</th>
                 <th>Destination</th>
                 <th>Seats</th>

               </tr>
             </thead>
             <tbody>
             {items.map(item => {
  return (

               <tr>

                 <td>{item.name}</td>
                 <td>{item.origin}</td>
                 <td>{item.destination}</td>
                 <td>{item.seats}</td>

               </tr>
             );
           })}

             </tbody>
           </Table>

    );
  }
}


export default Tab;

What should I do so that toggle renders the tab component?

Thank you.

Answer 1

After the discussion in the comment section, Lets say you have some items like

const items = [{name: 'a'},{name: 'b'},{name: 'c'} ]

Then try this code in main file

import React, { Component } from "react";

import {
   Route,
   NavLink,
   HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Caro from "./Carousel";
import { Carousel } from 'react-bootstrap';
import Tab from './Table';
import Form from './Form';

class Main extends Component {


state = { showing: true };

render() {
 const { showing } = this.state;
const items = [{name: 'a'},{name: 'b'},{name: 'c'} ]
 return (
  <div>
  <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
             { showing
                 ? <Form / >
                 : <Tab items={items}/>
             }
         </div>



  );
 }
}

export default Main;

Answer 2

As in the 'Tab' component, you are taking the items array from the props you have to pass the 'items' array from the 'Main' component to 'Tab' component.

import React, { Component } from "react";

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Caro from "./Carousel";
import { Carousel } from 'react-bootstrap';
import Tab from './Table';
import Form from './Form';
const items = [
    {name: 'something', origin: 'here', destination: 'there', seats: 3},
    {name: 'something1', origin: 'here', destination: 'there', seats: 3},
    {name: 'something2', origin: 'here', destination: 'there', seats: 3}
]
class Main extends Component {


state = { showing: true };

  render() {
    const { showing } = this.state;

    return (
      <div>
      <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
                 { showing
                     ? <Form / >
                     : <Tab items={items} />
                 }
             </div>



    );
  }
}

export default Main;