How to group props and make code more readable?

Question

Is this the only way of defining properties?

        <YAxis
            id="axis1"
            label="Requests"
            style={{ labelColor: scheme.requests }}
            labelOffset={-10}
            min={0}
            max={1000}
            format=",.0f"
            width="60"
            type="linear"
        />

This can be really cluttered if there is a long list of properties It remembers me a bit of inline css, which can become hard to read.

can't we just say:

var yAxis_props = ( id = ... label = ... )

and then insert them like:

<YAxis yAxis_props />

Answer 1

Yes can do that, define yAxis_props as an object with all the key-values. Like this:

var yAxis_props = {
  id: '',
  label: ''
}

Then using spread operator pass all the values as a separate prop, like this:

<YAxis
  {...yAxis_props}
/>

Check React Doc.

---

Ok, you are getting confused between these two ways:

// first way
<Component id='', label='' />

// second way
const obj = { id:'', label: ''}
<Component {...obj} />

Behind the scene both are same. Check this Babel repl output of these two ways. We write jsx, which will be converted into React.createElemet(component/html tag, props, children).

Code:

function ComponentA () {
   return( <div>Hello</div> )
}

function ComponentB() {
   return (
        <div>
            <A id='a' label='b' />
            <A {...{id:'a', label:'b'}} />
        </div>
   )
}

Converted form:

function ComponentA() {
  return react("div", null, "Hello");
}

function ComponentB() {
  return react(
    "div",
    null,
    react(A, {
      id: "a",
      label: "b"
    }),
    react(A, {
      id: "a",
      label: "b"
    })
  );
}

Answer 2

You can achieve something similar using spread operator.

let props={a:1, b:2}

...

<MyComponent {...props}/>

Answer 3

While the answers here cover the spread approach which is valid and works great, I would like remind that having too many props for a single component might indicate that this component suffers from too many variations, which in turn makes it really hard to maintain and extend.

In such cases you would like to consider the approach of Render Props or "children as function" as it is sometimes called.

This approach allows you to keep your component logic and basic behavior in a single place, while the developers using it can use it in composition to alter the way the component renders and interacts with the surroundings. There is a great talk by Kent C. Dodds about this here.

Hope this helps :)