Props and State on a Phone
A plant card in Sprout must show a different plant each time, and a "Watered" count must go up when you tap. Those are two different kinds of data. React calls them props and state, and they work in React Native exactly as they do on the web.
The rule
Props come in from the parent; state lives inside and changes.
Props are the inputs a parent passes to a child. The child reads them but never changes them:
function PlantCard({ name, everyDays }) {
return (
<View>
<Text>{name}</Text>
<Text>Water every {everyDays} days</Text>
</View>
);
}
<PlantCard name="Fern" everyDays={3} />State is data a component owns and can change over time. You create it with the useState hook. Calling the setter makes React render the component again with the new value:
import { useState } from 'react';
import { View, Text, Button } from 'react-native';
function WaterCounter() {
const [times, setTimes] = useState(0);
return (
<View>
<Text>Watered {times} times</Text>
<Button title="Watered" onPress={() => setTimes(times + 1)} />
</View>
);
}Two React Native details: event props are named for touches (onPress, not onClick), and a Button takes its label as the title prop rather than as children.
Props can also be functions. The list can pass onWatered={() => markWatered(plant.id)} to each card, and the card calls it from its button. That is how a child reports a tap back up to the parent that owns the data.
When a parent owns state and passes it down as a prop, the child always shows the latest value. This "state up, props down" flow is how the whole Sprout app stays consistent.
The shortcut
For any piece of data, ask "who decides this value, and can it change here?" Decided by the parent: prop. Changes because of something that happens in this component: state.
The plant's name
Decided by the list that renders the card, and it does not change inside the card. Prop.
The classic trap is changing a prop or state directly, like times = times + 1. Nothing re-renders. Always call the setter.
Drills
Answer fast — trust the rule.
In <PlantCard name="Fern" />, what is name?
Which prop runs code when a React Native Button is tapped?
What happens after setTimes(times + 1) runs?
Whether a plant card's details panel is open is toggled by tapping the card. What should hold it?
How does a React Native Button get its label?
Remember
- Props come in from the parent; state lives inside and changes.
- Ask "who decides this value, and can it change here?"
- Trap: assigning to state directly instead of calling its setter.