how to get a Component variable from another component but their both in the same file React

Question

I am trying to get a variable items in the the render of my class DataTable, from an outside component in the file Itemspaging. Is there any way to accomplish this?

DataTable.js :

import React, { Component } from 'react'
import { Table, Button} from 'reactstrap';
import ModalForm from '../Modals/Modal'
import '../../index.css';

const Itemspaging = props => {

  const j = parseInt(props.index);
  var start, end,itm;

    start=5*(j-1);
    end=start+(5-1);

    for (var i = 0; i < items.length; i++) {
     return(
       items.slice(start,end)
     )
   }
}


class DataTable extends Component {

    deleteItem = id_azienda => {

      let confirmDelete = window.confirm('Vuoi Eliminarlo Definitivamente?')
        if(confirmDelete){

          fetch('http://localhost:5000/api/azienda', {
          method: 'delete',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            id_azienda
          })

        })
          .then(response => response.json())
          .then(item => {
            this.props.deleteItemFromState(id_azienda)
            console.log(item)
          })

          .catch(err => console.log(err))
        }
        console.log(id_azienda)
      }

  render() {


    const items = this.props.items.map(item => {

      return (

        <tr key={item.id_azienda}>
          <th scope="row">{item.id_azienda}</th>
          <td>{item.nome_azienda}</td>
          <td>{item.tipo}</td>
          <td>
            <div style={{width:"110px"}}>
              <ModalForm buttonLabel="Modifica" item={item} updateState={this.props.updateState}/>
              {' '}
              <Button color="danger" onClick={() => this.deleteItem(item.id_azienda)}>Elimina</Button>
            </div>
          </td>
        </tr>
        )
      })



    return (
     [ <input type="text" id="myInput" onChange={this.Filter} placeholder="Search for names.." title="Type in a name"/>,

      <Table id="myTable" bordered  hover >

        <thead>
          <tr>
            <th>ID</th>
            <th  onClick={() => this.sortTable(0)}>Nome Azienda <i id="0" className="fa fa-fw fa-sort" ></i></th>
            <th  onClick={() => this.sortTable(1)}>Tipo Azienda<i id="1"className="fa fa-fw fa-sort"></i></th>
          </tr>
        </thead>

        <tbody>
          {items}
        </tbody>
      </Table>]
    )

  }

  Filter = () => {
    // Declare variables
    var input, filter, table, tr, td, cell, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
      // Hide the row initially.
      tr[i].style.display = "none";

      td = tr[i].getElementsByTagName("td");
      for ( j = 0; j < td.length; j++) {
        cell = tr[i].getElementsByTagName("td")[j];
        if (cell) {
          if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
            break;
          } 
        }
      }
    }
  }

   sortTable =(n) =>{
    var table, rows, switching, i, x, y, shouldSwitch, dir, classname, switchcount = 0;
    table = document.getElementById("myTable");
    classname ="fa fa-fw fa-sort";
    switching = true;
    // Set the sorting direction to ascending:
    dir = "asc";

    /* Make a loop that will continue until
    no switching has been done: */
    while (switching) {
      // Start by saying: no switching is done:
      switching = false;
      rows = table.rows;
      /* Loop through all table rows (except the
      first, which contains table headers): */
      for (i = 1; i < (rows.length - 1); i++) {
        // Start by saying there should be no switching:
        shouldSwitch = false;
        /* Get the two elements you want to compare,
        one from current row and one from the next: */
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        /* Check if the two rows should switch place,
        based on the direction, asc or desc: */
        if (dir === "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;

           //console.log(isn)
            break;
          }
        } else if (dir === "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        /* If a switch has been marked, make the switch
        and mark that a switch has been done: */
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        // Each time a switch is done, increase this count by 1:
        switchcount ++;
      } else {
        /* If no switching has been done AND the direction is "asc",
        set the direction to "desc" and run the while loop again. */
        if (switchcount === 0 && dir === "asc") {
          dir = "desc";
          switching = true;
        }
      }

    }

    //Arrows controls

    for(var t=0;t<document.getElementsByTagName("i").length;t++){
      console.log(t)
    console.log(n)
      if(n===t){
        console.log("entrato")
        if(dir==="asc"){
          classname ="fa fa-fw fa-sort-desc";
          document.getElementById(n).className= classname;

       }else{
         classname ="fa fa-fw fa-sort-asc";
          document.getElementById(n).className= classname;

       }
      }else{
        classname ="fa fa-fw fa-sort";
        document.getElementById(t).className= classname;
      }
    }
  }
}


export default {DataTable,Itemspaging};

Your help is much appreciated :)

Answer 1

Try to pass props from child component to parent component like this

You need to add this part in the file Itemspaging to pass the variable "items":

componentDidMount(){
      // if item exists, populate the state with proper data
      if(this.props.item){
        const { id_azienda, nome_azienda, tipo } = this.props.item
        this.setState({ id_azienda, nome_azienda, tipo })
      }
    }

Answer 2

Do not do that. You should always have 1 component/file. My advice is to have a container component that manages the data and passes it down to the two components you have. You can use methods passed as props to do changes on the top level dataset.

This should help you get an idea of how you should do it: Passing data between two sibling React.js components