CODEWITHSUNDEEP
javascriptreactjs
USer22999299
USer22999299

Reputation: 5674

React JS with redux-form with custom component

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

Upvotes: 1

Views: 45

Answers (1)

Johannes Reuter
Johannes Reuter

Reputation: 3547

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); })

Upvotes: 3

Related Questions