1

I use a functional component to display these divs. I have also another component that uses the displayCounter component and keeps track of a state. My state is a counter and I have some buttons to increase and decrease the counter.

Let's say that the state is

state = { counter: 0 }

The div with the Example 1 does not display the changes of the counter. But the div with Example 2 works fine?

So when I click to increase button div 1 always displays 0, but div 2 works fine.

Can somebody explain to me the reason?

import React from 'react';

const displayCounter = (props) => {
    return (
        <div>
            <div> Example 1: {props.value} </div>
            <div> Example 2: <span>{props.value}</span> </div>
        </div>
    );
}

export default displayCounter;

Add a comment if you want to post the full code for the mini-app.

import React, { Component } from 'react';

import CounterControl from '../../components/CounterControl/CounterControl';
import DisplayCounter from '../../components/DisplayCounter';

class Counter extends Component {
    state = {
        counter: 0
    }

    counterChangedHandler = () => {
        this.setState( ( prevState ) => { return { counter: prevState.counter + 1 } } )
    }

    render () {
        return (
            <div>
                <DisplayCounter value={this.state.counter}/>
                <CounterControl label="Increment" clicked={() => this.counterChangedHandler( 'inc' )} />
            </div>
        );
    }
}

export default Counter;
Manolis P.
  • 195
  • 2
  • 14

1 Answers1

0

You should not use props, props is a old way, you should use this

import React from 'react';

const displayCounter = ({ counter }) => {
    return (
        <div>
            <div> Example 1: {counter} </div>
            <div> Example 2: <span>{counter}</span> </div>
        </div>
    );
}

export default displayCounter;
Patrik
  • 499
  • 1
  • 7
  • 24
Mace
  • 131
  • 1
  • 7
  • 3
    You are using props, you are just using them with destructuring. – Jacob Smit Nov 15 '20 at 21:22
  • Welcome to SO! You know, it doesn't seem like the OP's code is broken. They posted a sandbox demo of it. It works for me, does it work for you? https://f6vnw.csb.app/ – HoldOffHunger Nov 15 '20 at 21:31
  • @JacobSmit what do you mean? – Manolis P. Nov 15 '20 at 21:40
  • @ManolisP. Just stating that Mace is still using props they are just destructured. Look at object destructuring: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) – Jacob Smit Nov 15 '20 at 22:41
  • @JacobSmit so it take the props and only keeps the counter prop if i understand correctly? – Manolis P. Nov 16 '20 at 14:41
  • They are all still passed to the function but only accessible if included in the destructuring. You can use it when you want to break up an object into easier to access variables, or when you want to only use part of an object. Say you had props of `{ propA: 1, propB: 2, propC: 3 }` using destructuring you could have `{ propA, propB: prop2, ...rest }` this would give you access to `propA`, `propB` accessible as `prop2` and all the remaining properties in `rest`. – Jacob Smit Nov 16 '20 at 20:33
  • @JacobSmit I understand! The problem was the chrome. But it's nice to learn thinks that you don't know yet! Thank you! – Manolis P. Nov 18 '20 at 13:08