CODEWITHSUNDEEP
reactjsreact-props
koko ka
koko ka

Reputation: 117

Pass an object value in props to another component

Consider the code below, I need to pass an id which is in object format to another component by props. But I have try many time and it not working. I think I may have some thing mistake, but I'm not sure where is it.

Main page (updated):

render(props){
const data = this.state.data;
return (
    <div>
        <Header />
        <NavigationBar />
        <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal}/>
          <div className="purchase-side">
            <div className="side-title">
              <h1>Purchase Order List</h1>
            </div>
            <hr class="solid" />
            {
              Object.keys(data).map((key) =>
                <div className="list-item">
                  <h2 onClick= {() => this.openModal(data[key].id)}> //get id
                    { data[key].item_name}
                  </h2>
                </div>
            )}
          </div>
          <div className="dads">        
        </div>
        </div>

    );
}

openModal (Updated):

  openModal = (id) => {
    this.setState(
      {
        displayModal: true,
        id: id
      });
    console.log(id) // i can get the id from here id=1
  };

PurchaseInfoView to get the id (Updated).

class PurchaseInfoView extends Component {
 render() {
        console.log(this.props.id) // get undefined
        return (
        <div className="Modal"
            style={{
                transform: this.props.show ,
                opacity: this.props.show ? "1" : "0"
              }}
            >

            <h3>Purchase Order detail</h3>
            <p>Id: {this.props.id}</p> //cannot get it
        </div>
        );
    }
}

export default PurchaseInfoView;

console.log result: enter image description here

Upvotes: 0

Views: 69

Answers (2)

Palencar
Palencar

Reputation: 159

If you want to pass an object to props here are the steps:

  1. define the object in your parents state.
  2. pass the object in props when calling components
  3. get the object from props in child.

Here you are missing the second step!

You should try these:

MainPage

render(props){
const { data, modalObject, displayModal } = this.state; //use destructuring is more readable
return (
    <div>
        <Header />
        <NavigationBar />
        <PurchaseInfoView show={displayModal} closeModal={this.closeModal} modalObject={modalObject}/> //pass the object from destructuring state as props
        <div className="purchase-side">
          <div className="side-title">
            <h1>Purchase Order List</h1>
          </div>
          <hr class="solid" />
          {
            Object.keys(data).map((key) =>
              <div className="list-item">
                <h2 onClick= {() => this.openModal(data[key].id)}> //get id
                  { data[key].item_name}
                </h2>
              </div>
          )}
        </div>
        <div className="dads">        
      </div>
      </div>
    );
}

OpenModal

  openModal = (id) => {
    this.setState(
      {
        displayModal: true,
        modalObject: {id: id, ...any others key/val pair}
      });
  };

PurchaseInfoView

class PurchaseInfoView extends Component {
 render() {
        const { modalObject} = this.props; //here get your object from props
        console.log(modalObject.id);// here you have the object
        return (
        <div className="Modal"
            style={{
                transform: this.props.show ,
                opacity: this.props.show ? "1" : "0"
              }}
            >

            <h3>Purchase Order detail</h3>
            <p>Id: {modalObject.id}</p>
        </div>
        );
    }
}

Tell me if you have any question in comment ;)

NB: i did this with an object (aka {} ) if you needed more things in your modal than just id. If just id is needed you just have to replace the modalObject by just the "id" you need

Cheers!

EDIT: for this solution to work you have to either:

  • initialise your state to this at least:

    this.state={ modalObject : { id: ''}}

  • or make a not null test in your child component before displaying the element like so:

    Id: {modalObject && modalObject.id ? modalObject.id : ' '}

These are needed because on first render your state will have the initial state you setted so if you didnt set anythin or didnt test for a value... well... it's undefined! :)

(note if id is null instead of having an undefined error you will have a blank space displaying in your modal)

Upvotes: 1

joy08
joy08

Reputation: 9652

Guess you are calling it wrongly. It should be {this.props.id}

render() {
        console.log(this.props.id);
        return (
        <div className="Modal">
            <h3>Purchase Order detail</h3>
                <p>Id: {this.props.id}</p>  //Changed line
        </div>
        );
    }

Inside main page pass the id to PurchaseInfoView and access it as a prop


   <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal} id={this.state.id}/>

Upvotes: 0

Related Questions