What does that props mean?

Question

In this example:

class TodoList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Route
          path="/todos/new"
          component={props => <NewTodoForm {...props} />}
        />
      </div>
    );
  }
}

In the NewTodoForm component, it reaches the {...props} by using

this.props.history.push("url")

I am confused that in {...props}, why does it use props rather than this.props? I know that is a stateless function and props is a parameter. But where does that props come from?

Any help or comment will be appreciated, thanks.

props are passed in component markup. For example: If you have dom component`````` then your component's props will be ```{prop1: "val1", prop2: "val2"}``` — dorintufar, Aug 22 '18 at 06:35
Check this post. It will help you understand more https://stackoverflow.com/questions/44255415/passing-custom-props-to-router-component-in-react-router-v4/44255850#44255850 — Shubham Khatri, Aug 22 '18 at 07:04

score 2 · Accepted Answer · answered Aug 22 '18 at 06:41

2

component={props => <NewTodoForm {...props} />}

is using the render prop pattern, i.e. having a prop that is a function that returns something for the parent component to render.

The parameters passed to a render prop function could be anything, but in react-router's component prop's case, it'll be the route props object, i.e. {match, location, history}.

answered Aug 22 '18 at 06:41

AKX

152,115
15
115
172

Thanks for your help, it really helps. – Aurora Aug 22 '18 at 13:32

What does that props mean?

1 Answers1