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 :)

Bogdan M. · Accepted Answer · 2019-11-29 14:28:11Z

3

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

answered Nov 29, 2019 at 14:28

Bogdan M.

2,1817 gold badges31 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aless1995 · Accepted Answer · 2020-01-14 16:07:43Z

2

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 })
      }
    }

edited Jan 14, 2020 at 16:07

answered Jan 14, 2020 at 14:52

Aless1995

3632 silver badges14 bronze badges

2 Comments

Arun Vinoth PrecogTechnologies Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Aless1995 Over a year ago

Thanks a lot for the feedback, sorry for this mistake. As soon as possible I will modify the answer so that it respects the rules.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related