React JS with redux-form with custom component

Question

Found on redux from website the following example:

render() {
  return (
    <div>
      <Field name="myField" component={props =>
        <MyStrangeInput 
          currentValue={{val: props.value}}
          thingsChanged={param => props.onChange(param.val)}/>
      }/>
    </div>
  );
}

I understand that we pass MyStangeInput 2 arguments to the component, currentValue and thingsChanged.

currentValue been used and "value" and thingsChanged used as a method for "onChange"

I would love the get explanation regarding the following syntax:

{{ val: props.value}} - is it passing an object?

and

{param => props.onChange(param.val)} is it creating "param" arrow function?

it's a little bit confusing

Johannes Reuter · Accepted Answer · 2018-11-01 09:22:55Z

currentValue={{val: props.value}} is creating an object with a key val and passing it to the MyStrangeInput component as the currentValue prop. The outer curly brackets mark the property value and the inner curly brackets define the object`. It would be also possible to create the object in the render method and just use it in the JSX context:

props => {
        const currentVal = { val: props.value};
        return <MyStrangeInput 
          currentValue={currentVal}
          thingsChanged={param => props.onChange(param.val)} />;
}

{param => props.onChange(param.val)} indeed creates an arrow function with param as the first and only parameter. It is a shorthand notation for

{(param) => {
  return props.onChange(param.val);
}}

Actually there are two syntax shortcuts used here. First you can omit the brackets around the parameter list if there is only one parameter (param instead of (param)) and second you can omit the curly brackets around the function body if you want to directly return the value of the only statement of the body (props.onChange(param.val); instead of { return props.onChange(param.val); })

Collectives™ on Stack Overflow

React JS with redux-form with custom component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related