How to pass props to component

Question

If a reducer function can override a prop like this:

 return {...state, foo: action.payload };

Then if we have a component as such:

  const MyComponent = (props) => {
    return <div>{props.foo}</div>;
  }

How do I override in the same manner as above?

I want to do it like below but it doesn't work

<MyComponent {...props, foo: 5} />

Answer 1

You need to pass it the same way you would pass props to an xml element.

<MyComponent {...props} foo={5} />

You should also checkout the Component and Props guide by react.

Answer 2

You should try:

<MyComponent {...props} foo={5} />