Is My Reactjs Components too Granular?

Question

I am playing around with Reactjs and I am wondering if I broken out my components too much.

 <script type="text/babel">

class MainCompoent extends React.Component {
      constructor() {
          super();
          this.state = { 
                items : [
                            {
                                name: 'Test 1',
                                type: { value: "1"},
                                types: [
                                          { value: "2"},
                                          { value: "1}
                                      ]
                            },
                            {
                                name: 'Test 2',
                                type: { value: "1"},
                                types: [
                                          { value: "2"},
                                          { value: "1}
                                      ]
                            },
                          ]
                };
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="item-container"> 
                {
                      this.state.items.map((item, i) => {
                          return <Item item={item} index={i} />
                      })
                }
              </div>
          )
      }
    }

class Item extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="item"> 
                    <General item={this.props.item} index={this.props.index}  />
                    <Specific1 />
                    <Specific2 />
              </div>
          )
      }
    }

class Specific1 extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="Specific1-container"> 
                   <h1>Specific1 Container </h1>
              </div>
          )
      }
    }

  class General extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      handleChange(event) {
        this.props.handleChange(event.target.value, this.props.index);
      } 
      handleChange2(event) {
        this.props.handleChange2(event, this.props.index);
      }  
      render() {
          return (
              <div className="general-container"> 
                   <h1>General Container </h1>
                  <div>
                    <label>Name</label>
                    <input type="text" value={this.props.item.name}/>
                  </div>
                  <div>
                    <label>Type </label>
                    <select value={this.props.item.type.value} onChange={(event) => this.handleChange(event)}>
                        {
                          this.props.item.types.map((type, i) => {
                              return <option key={'type-' + i}  value={type.value} >{type.value}</option>;
                          })
                        }
                    </select>
                  </div>
              </div>
          )
      }
    }


  class Specific2 extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="specific2-container"> 
                   <h1>Specific2 Container </h1>
              </div>
          )
      }
    }

  ReactDOM.render(<MainCompoent />, document.getElementById("Container"));
 </script>

The above code I stripped out everything I don't think was necessary. I am trying to do this without flux or redux.

In the Item container, there are 3 components that get rendered together. The general will always be shown but only 1 of the other 2 will ever be shown(despite my similar names they are different and have to be 2 separate components). All 3 components do share properties and hence why I put the state in the top and was passing it down.

The one thing though is when I have to update this state I potentially have to go up 2 parents(ie handelChange from General would have to go up to Item which would have to go to MainComponent to update the state).

Is this bad?

Answer 1

I'd stacked with similar question and found to my self a pretty simple answer. It all depends on what level of abstraction do you need.

Eg. if Item component could not "live" without General then the better way is to include General to Item. If they are totally independent then you could simply keep General props-API stable and change itself.

Passing props to the parent is OK, but the better way is to keep one source of truth. If you don't want to use any of data-flow libraries (redux, flux, whteverx) then simply make the Root component as the smartest. Let it to control of app-state changing.

Here is a nice "guide" how to let React components communicate with each other (https://facebook.github.io/react/docs/lifting-state-up.html). Parent to Child via Props, Child to Parent via Callbacks.