Right way to manage components functionality in React

T. Jony

I found on React documentation page, that the technique using the right way React can be based on Single responsibility principle, that is a component should do one thing only. I've already made a simple Gameboard, which includes input, score random generated number and a condition. All the calculations and presentations are made in Gameboard component. Now I would like split up my application in to different components. What is the proper way to do so? One way as I thought is to make a different components like so: Score, Input, RandomNumber. But I'm pretty lost. I make a Score component, in that component I'm displaying data and updating the score state. So how should I pass this data to my parent Gameboard component? With a callback function?

Or should I just make a variable in Gameboard of my score value, all the incrementation(functionality of score: this.state.score + 1 should be done in Score component, update the score in Score component and send the updated data to Gameboard component?

TKoL

Here's an extremely simple example where the state of the score is stored in the Gameboard, but is to be displayed and possibly added to by the Scoreboard

class Gameboard extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      score: 1
    }
  }
  
  add() {
    const newScore = this.state.score + 1;
    this.setState({score:newScore});
  }
  
  render() {
    return (
        <div>
          <Scoreboard score={this.state.score} onAdd={this.add.bind(this)}/>
        </div>
    )
  }
}

class Scoreboard extends React.Component {
  render() {
    return (
      <header>
        <h1>{this.props.score}</h1>
        <button onClick={this.props.onAdd}>add</button>
      </header>
    )
  }
}

ReactDOM.render(<Gameboard />, mountNode);

You can input that code into this site to see it work.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Manage Focus on stateless Components - React

Right way to manage a high traffic connection application

How to organize functionality across react components?

How to manage props of a list of components in React?

Putting React components in reducer to manage state updates?

Using SASS in Vue components the right way

Angular: How to do the Components Architecture the right way?

React.JS - Manage content of contenteditable div as React components

Is there a quick way to automock react components

Correct way to inherit React components

Is there a way to treat React components as strings?

Right way of implementing a modal in React

Right way of fetching data - React

Best way to manage height of angular components to fit in screen

Right way to manage Arrays with intersecting types and narrow them back down

What is the right way for passing data between 2 child components in svelte

Which right way to organization vue.js components and Laravel backend

what is the right way to implement contextType in reactjs functional components?

React Components - What is the proper way to create them?

More efficient way of writing multiple React components?

Is there a way to use React Components within Elm?

Which is the way React unmounts child components?

Is there a more concise way of assigning properties to components in react?

Best way to destructuring inside react components?

Correct way to share functions between components in React

The most "react" way to pass state to other components

Cleaner way to change focus on child components in React

Correct way to hide components in React.js

What is the most logical way to export React components?