Two ideas run all of React: data in, data owned.
Direct answer
Props are values passed into a component by its parent and are read-only. State is data that a component owns and can update, causing a re-render. When siblings need the same data, move the state up to their parent and pass it down as props.
Example
function Greeting({ name }) { // prop
return <Text>Hello {name}</Text>;
}
export default function App() {
const [name, setName] = useState("Ada"); // state
return (
<View>
<Greeting name={name} />
<TextInput value={name} onChangeText={setName} />
</View>
);
}
Comparison
| Props | State | |
|---|---|---|
| Owned by | parent | the component |
| Can change | no | yes, with the setter |
| Purpose | configure | remember |
Lifting state up
Keep state in the closest common parent and pass the value and the setter to children.
Where Teyro fits
Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.
The bottom line
Props flow down, events flow up.
