score:1

Accepted answer

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)

score:0

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



Related Query

More Query from same tag