Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Killeon Patterson
Killeon Patterson
17,451 Points

Passing arrays from one component to another, using props.

import React, { Component } from 'react';
import StatLine from "./statLine.component";
import axios from 'axios';

  function Users(props) {
  return <tr>
      <td>{props.users.name}</td>
      <td>{props.users.kind}</td>
      <td>{props.users.email}</td>
      <td>
       <a href="#" onClick={() => { props.deleteMenu(props.users._id) }}>delete</a>
      </td>
    </tr>
  }


export default class MenuItems extends Component {
  constructor(props) {
    super(props);

    this.deleteMenu = this.deleteMenu.bind(this);
    this.emailList = this.emailList.bind(this);


    this.state = {
      users: []

    };
  }

   componentDidMount() {
      axios.get('http://localhost:5000/users/')
        .then(response => {
            this.setState({ users: response.data })
          })
          .catch((error) => {
            console.log(error);
          })
      }



  deleteMenu(id) {
    axios.delete('http://localhost:5000/users/'+id)
      .then(res => console.log(res.data));
    this.setState({
      users: this.state.users.filter(el => el._id !== id)
    })
  }


  emailList() {
//getting props from state array
     return this.state.users.map(userEmail => {
       console.log(userEmail.email);
       return <StatLine ema={userEmail.email}/>;
       })

  }

    usersList() {
// calling the function that passing props
      this.emailList();
      return this.state.users.map(currentusers => {
        return <Users users={currentusers} deleteMenu={this.deleteMenu} key={currentusers._id}/>;
      })
    }


  render() {
    return (



      <div>
        <h3 >Customers</h3>
        <table className="table">
          <thead className="thead-light">
            <tr>
              <th>name</th>
              <th>kind</th>
              <th>email</th>
              <th>Actions</th>
            </tr>
            </thead>
            <tbody>
              { this.usersList() }
            </tbody>
          </table>
        </div>
    )
  }
}
import React, { Component } from 'react';
import axios from 'axios';

function LilStat(props) {
let start = "none";

return (
  <div
  style={{border: "solid", borderWidth: "2px", borderColor: "#cce0ff", borderRadius: "10px"}}
  className="shadow-sm p-2 mb-3 bg-white   card">
  <div className="card-body">
    <h3 style={{color: "#303030", fontWeight: "bold", fontFamily: "Times Roman", letterSpacing: "1px"}}
    onClick={() => {props.displayOrder(props.status.ourId)}}>{props.status.ourId}</h3>
    <h2 style={{color: "#0047b3"}}>"{props.status.ready}"</h2>
    <p style={{fontSize: "2.2em"}} >{props.status.timeMan} min</p>

    <div>

    <button type="button" value="button"  className="btn btn-success btn-sm" className="btn btn-outline-success btn-sm"
    style={{ marginLeft: "2%", marginRight:"1%", fontWeight: "bold"}}
     onClick={() => { props.tisGift(props.status.ourId)}}> a gift</button>

     <button type="button" value="button" className="btn btn-danger btn-sm" style={{fontWeight: "bold",  color: "white", marginLeft: "6px"}}
     onClick={() => { props.deleteButton(props.status._id) }}> - </button>

     <div className={props.status.ourId}  style={{marginLeft: "1%", display: "none"}}>
<div style={{display: "inline-block"}}>
     <button type="button" value="button"  className="btn btn-warning btn-sm" style={{
      color: "white", fontWeight: "bold"}}
      onClick={() => { props.sendGift(props.gifted, props.status.ourId)}}> send gift</button>
  </div>
  <div style={{display: "inline-block", marginTop: "2%"}}>
   <input
   style={{fontWeight: "bold", color: "grey", marginLeft: "4%"}}
     className="gift"
     placeholder=" please type in a valid email"
     value={props.forGift}
       onChange={props.giftedName}
       type="text"
     />
     </div>

    </div>
    </div>

    </div>
  </div>

)}



    ordersList() {
       return this.state.statusCon.map(sl=> {
         return <LilStat
         status={sl}
         displayOrder={this.displayOrder}
          deleteButton={this.deleteButton}
         tisGift={this.showGift}
          gifted={this.state.gifted}
          sendGift={this.sendGift}
          showGift={this.state.showGift}
          forGift={this.state.gifted}
         giftedName={this.giftedName}
         key={sl._id}/>;
      })
    }





      render() {
// console logging props from the MenuList component
console.log(this.props.emailArray);

    return (

      <div>
      { (this.state.showDelete === false) ?
    <EditRun showDelete={this.showDelete}/>
      :
      <DeleteRun closeDelete={this.closeDelete} accountDelete={this.accountDelete}/>
    }
      <h2
      className="shadow p-1 mb-4"
      style={{
        marginTop: "3%",
        fontFamily: "georgia",
        color: " grey",
        fontSize: "35px",
        letterSpacing: "2px",
        backgroundColor: "",
        textAlign: "center",
        border: "solid",
        borderWidth: "1px",
        borderRadius: "5px"

    }}>Profile</h2>
          <div>
          { this.ordersList() }
      </div>


        </div>


    )
  }
}