state
important to your app, that then renders child components. You want these components to have access to some pieces of that state
, which are passed in as props.
For example, maybe you have an App
component that renders a Navbar
, among other components. In your App
, you have state
that contains a lot of user information, but the Navbar
only needs access to the user's username so it can display it. You pass that piece of state
to the Navbar
component as a prop.
This pattern illustrates some important paradigms in React. The first is unidirectional data flow. State flows in one direction down the tree of your application's components, from the stateful parent component to child components. The child components only receive the state data they need. The second is that complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. It begins to create a separation where state management is handled in one part of code and UI rendering in another. This principle of separating state logic from UI logic is one of React's key principles. When it's used correctly, it makes the design of complex, stateful applications much easier to manage.
MyApp
component is stateful and renders a Navbar
component as a child. Pass the name
property in its state
down to the child component, then show the name
in the h1
tag that's part of the Navbar
render method.
MyApp
component should render with a Navbar
component inside.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })(), 'The MyApp
component should render with a Navbar
component inside.');
- text: The Navbar
component should receive the MyApp
state property name
as props.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').props() )}; const navProps = await setState(); assert(navProps.name === ''TestName'', ''The Navbar
component should receive the MyApp
state property name
as props.''); }; '
- text: The h1
element in Navbar
should render the name
prop.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find(''Navbar'').find(''h1'').text(); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').find(''h1'').text() )}; const navH1After = await setState(); assert(new RegExp(''TestName'').test(navH1After) && navH1After !== navH1Before, ''The h1
element in Navbar
should render the name
prop.''); }; '
```