Listing 4-5: Passing props
Old McDonald had a farm.
On his farm, he had some pigs.
On his farm, he had some cows.
On his farm, he had some chickens.
export default function Farm(props){
return (
<div>
<p>{props.farmer} had a farm.</p>
<p>On his farm, he had some {props.animals[0]}.</p>
<p>On his farm, he had some {props.animals[1]}.</p>
<p>On his farm, he had some {props.animals[2]}.</p>
</div>
)
}
Mr. Jones had a farm.
On his farm, he had some pigs.
On his farm, he had some horses.
On his farm, he had some donkey.
export default function Farm(props){
return (
<div>
<p>{props.farmer} had a farm.</p>
<p>On his farm, he had some {props.animals[0]}.</p>
<p>On his farm, he had some {props.animals[1]}.</p>
<p>On his farm, he had some {props.animals[2]}.</p>
</div>
)
}
import Farm from './Farm';
export default function Farms(){
return(
<>
<Farm
farmer="Old McDonald"
animals={['pigs','cows','chickens']} />
<Farm
farmer="Mr. Jones"
animals={['pigs','horses','donkey','goat']} />
</>
)
}Download the examples, report issues, and ask/answer questions in the discussion area by visiting the book's github page. All of the code for the book is also available on codesandbox.io for you to play around with.
ReactJS Foundations is published by John Wiley and Sons, Inc and is available in paperback and eBook.
