1
\$\begingroup\$

I'm a newbye in React. I created some simple Components to practice. For now, I'm using class Component (I want learn either class COmponent or function COmponent). I would know if I projected properly my Components or if I could have a better setting: My little application allow to increment a number of 1 by default, but I can change the increment picked from an input[type="range"]

Counter.js:

    import { Component } from "react";

export default class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, increment: props.step || 1 };
    this.incrementCount = this.incrementCount.bind(this);
  }

  incrementCount() {
    this.setState({ count: this.state.count + this.props.step });
  }

  render() {
    return (
      <>
        <p>Il contatore attualmente è {this.state.count}</p>
        <button onClick={this.incrementCount}>Incrementa</button>
      </>
    );
  }
}

StepCounter.js:

import { Component } from "react";
import Counter from "./Counter.js";

export default class StepCounter extends Component {
  constructor(props) {
    super(props);
    this.state = { step: 1 };
    this.changeStep = this.changeStep.bind(this);
  }

  changeStep(e) {
    const clickedEl = e.target;
    const choosedStep = Number(clickedEl.value);
    this.setState({ step: choosedStep });
  }

  render() {
    return (
      <>
        <input
          type="range"
          name=""
          id=""
          min={1}
          max={10}
          step={1}
          value={this.state.step}
          onChange={this.changeStep}
        />
        <Counter step={this.state.step} />
      </>
    );
  }
}

and App.js:

import { Component } from "react";
/* import Counter from "./Counter"; */
import StepCounter from "./StepCounter";

export default class App extends Component {
  /*   constructor(props) {
    super(props);
  } */

  render() {
    return <StepCounter></StepCounter>;
  }
}

It works but, I repeat, I would know if I could improve the design.

\$\endgroup\$
5
  • \$\begingroup\$ One think I notice is that you don't properly use the prevState to create the new state: setState((prevState) => ({stateName: prevState.stateName + 1 })) \$\endgroup\$ Commented Nov 21, 2023 at 11:49
  • \$\begingroup\$ Realy? I think this isn't the case. You suggest to use an updater function to modify the state but in my case I have no need. \$\endgroup\$ Commented Nov 21, 2023 at 12:00
  • \$\begingroup\$ You could be right, I just read that it's always safer to use the prevState argument to make sure you use the latest state. You might not see any difference in your case. \$\endgroup\$ Commented Nov 21, 2023 at 13:22
  • \$\begingroup\$ @Kokodoko Yes it's safer if you don't know how it works under the belt. This is a good discussion about: stackoverflow.com/questions/57828368/… In my case is the same \$\endgroup\$ Commented Nov 21, 2023 at 14:42
  • \$\begingroup\$ Apart from that you might consider using arrow functions in the handlers. onClick={(e) => this.incrementCount(e)}> and onChange={(e) => this.changeStep(e)}The reason is that you can remove the bind statements. But this too has huge amounts of discussion about which is better :). And when you keep reading the end conclusion is to switch to hooks :/ \$\endgroup\$ Commented Nov 23, 2023 at 10:18

0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.