PPXia PPXia - 3 months ago 16
React JSX Question

Reactjs How to pass the props of current page into child page

This is

Clients_info.js


In this component's props, it has several values.

And now I want to pass all the
props
in this component to the
Modalbox
component.

I know how to pass value from the current
state
to child component in render function as
props
. But....from
props
to
props
...

How could I make that? Thanks!



import React from "react";

import Modalbox from './Client_modal'

require('../../css/Clients.scss');

var $ = require ('jquery');

export default class Clients_info extends React.Component {
constructor(props) {
super(props);
}

//Invoked once, both on the client and server, immediately before the initial rendering occurs.
componentWillMount(){

}


render() {
return(
<div id='tabbox-order' className='clients_info'>
<div id='clientsInfo_wrapper'>
<div id='clientsInfo_row'>
<div id='ava_wrapper'>
<img id='clietnsInfo_avatar'></img>
<p>{this.props.client.name}</p>
</div>

<div id='infor_wrapper'>
<p><i class="material-icons">email</i> Email: {this.props.client.email}</p>
<p><i class="material-icons">phone</i> Phone: {this.props.client.phone}</p>
<p><i class="material-icons">location_on</i> Address: {this.props.client.loc}</p>
<p><i class="material-icons">my_location</i> Zip Code: {this.props.client.zip}</p>
</div>
</div>

<div id='key' >
<i class="material-icons">vpn_key</i>{this.props.client.key}
</div>
<div id='Cutting' ></div>
<div>
<h4>Pets Information</h4>
{ this.props.pets.map(function(pet) {
return(
<div>
<div className='row'key={pet.id}>
<div className='col-md-3' >avatar</div>
<div className='col-md-3' >{pet.petName}</div>
<div className='col-md-3' >{pet.breed}</div>
<div className='col-md-3' >{pet.age}</div>
</div>

<div id='pet-detail'>
<p>Extra Information:</p>
<input placeholder='This dog is crazy!!!'>
</input>

</div>
</div>

)
})
}

</div>

<div id='Cutting' ></div>

<Modalbox/>

</div>



</div>
);
}
}




Answer
<Modalbox pets={ this.props.pets }/>

Should do the job

Comments