Passing data between components using properties

 properties, to pass data between components.

class Cars extends Component{
render(){
console.log(this.props);
 return(
 <div>
<h3>from cars component</h3>
<p>{this.props.msg}</p>
<p>{this.props.model}</p>
</div>
);
}
}

can be called in jsx of another component.

<Cars />

to pass data.

<Cars msg="cars are cool" />

read inside of cars using {this.props.msg}

we can pass multiple properties like this.

<Cars msg="cars are cool" model="34567"/>

To pass on an object.

-----------------

crete object, outside calling class so preceded with class name.

<callingclass>.defaultProps={

cars: ['BMW','MERC','City','Audi']

}

In jsx,

<Cars msg="cars are cool" model="34567" coolCars={this.props.cars}/>

class Cars extends Component{
render(){
console.log(this.props);
 return(
 <div>
<h3>from cars component</h3>
<p>{this.props.msg}</p>
<p>{this.props.model}</p>
<p>{this.props.coolCars}</p>
<p>{this.props.coolCars.map((item,i)=>{
return i+" "+item+<br>;
})}</p>
</div>
);
}
}

property types

App.propTypes={

propObject: React.PropTypes.object,

propString:React.PropTypes.string.isRequired,

propNumbers:React.PropTypes.number

}

//Similarly for function,boolean,array,etc.

App.defaultProps={

propNumber: 3,

propString: "hhkjhjk",

propObject: {

obj1: "jjkkj",

obj2: "khkjhjk"

obj3: "kjkjkl"

}

}

And call in another class using in jsx:

<h3>{this.props.propNumber}</h3>