A React element is a lightweight description of UI—a plain object React understands. Props (properties) are read-only inputs you pass into components, like function arguments.
Passing props
function Greeting({ name }: { name: string }) {
return <p>Hello, {name}</p>;
}
<Greeting name="Ada" />Props are read-only
Never mutate props inside a component. If something must change, it belongs in state (covered in the next module) or the parent passes new props.
Spreading props
You can forward props with spread: <input {...fieldProps} />. Use sparingly—explicit props are easier to trace.
Important interview questions and answers
- Q: Element vs component?
A: An element is what you create with JSX; a component is a function or class that returns elements. - Q: Can you change props inside a child?
A: No—props flow down and are immutable from the child’s perspective.
Self-check
- How is passing props similar to calling a function with arguments?
- Why should children not modify props directly?