How do i use my incremented value inside inside an other component

Question

For school i need to make an react app, it is my first time using, html, css, javascript and react and now i am stuck on part where i have to post the data to an API. My part is to create a page where people can select skittles and when they press oke. The data is send.

I created a single Selector

import React, { Component } from "react";
export default class Selector extends Component {
    state = {
        value: this.props.selector.value,
    };

    handleIncrement = () => {
        this.setState({ value: this.state.value + 1 });
        console.log(this.state.value);
    };

    handleDecrement = () => {
        this.setState({ value: this.state.value - 1 });
    };

    render() {
        return (
            <div>
                {this.props.children}
                <span>{this.state.value}</span>
                <button
                    onClick={this.handleIncrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    +
                </button>
                <button
                    onClick={this.handleDecrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    -
                </button>
                <button
                    onClick={() =>
                        this.setState({
                            value: 0,
                        })
                    }
                    className="btn btn-danger btn-sm m-2"
                >
                    Reset
                </button>
            </div>
        );
    }
}

From the one selector i made multiple selectors

import React, { Component } from "react";
import Selector from "./selector";
import axios from "axios";

export default class Selectors extends Component {
    state = {
        skittleSelectors: [
            { id: 1, value: 0, color: "Green", availability: 0 },
            { id: 2, value: 0, color: "Red", availability: 0 },
            { id: 3, value: 0, color: "Yellow", availability: 0 },
            { id: 4, value: 0, color: "Purple", availability: 0 },
            { id: 5, value: 0, color: "Orange", availability: 0 },
        ],
    };

postData(){
        const greenSelector = this.state.skittleSelectors.findIndex(
            (element) => element.color === "Green"
        );
        let greenValue = this.state.skittleSelectors[greenSelector].value;
        console.log(greenValue);
    };

render() {
        return (
            <div>
                <button onClick={this.postData}>POSTDATA</button>
                {this.state.skittleSelectors.map((selector) => (
                    <Selector
                        key={selector.id}
                        selector={selector}
                        onReset={this.handleReset}
                    >
                        <p>{selector.color}:</p>
                        <p>amount availible: {selector.availability}</p>
                    </Selector>
                ))}
            </div>
        );
    }
}

Now my question

When I log the values inside the handleIncrement() of the single selector it is correcly displayed in the console. But i want to use that data in the Selectors page. but when i try to log it there it simply said 0 because of the initial value.

how can i solve this. I have tried to use the post inside the Selector.jsx, but thats not correct I think and I still cant get it to work. I tried somewhat here and there by using the componentDidMount() and componendDitUpdate(), but with no succes.

So how can I use my updated stated inside the postData method from my Selectors file. I hope you guys can help me out here, after 1 day I am completely stuck.

Thank you in advance.

Answer 1

I have fixed your code. Actually, you need to pass changed value from Selector to Selectors that is what I have done using onChangedValue props. Moreover, I have changed setState as when you change your state using your current state you should use prevState

Selectors Component

import React, {Component} from "react";
import axios from "axios";
import Selector from "./Selector";

export default class Selectors extends Component {
    state = {
        skittleSelectors: [
            {id: 1, value: 0, color: "Green", availability: 0},
            {id: 2, value: 0, color: "Red", availability: 0},
            {id: 3, value: 0, color: "Yellow", availability: 0},
            {id: 4, value: 0, color: "Purple", availability: 0},
            {id: 5, value: 0, color: "Orange", availability: 0},
        ],
    };

    postData = () => {
        const greenSelector = this.state.skittleSelectors.findIndex(
            (element) => element.color === "Green"
        );
        let greenValue = this.state.skittleSelectors[greenSelector].value;
        console.log(greenValue);
    };

    onChangedValue = (selector, value) => {
        this.setState(prevState => {
            let currentItem = this.state.skittleSelectors.find(s => s.id === selector.id);
            currentItem.value = value;
            return{ skittleSelectors: [...this.state.skittleSelectors] }
        }, console.log(this.state.skittleSelectors, 'skittleSelectors'));

    };

    render() {
        return (
            <div>
                <button onClick={this.postData}>POSTDATA</button>
                {this.state.skittleSelectors.map((selector) => (
                    <Selector
                        key={selector.id}
                        selector={selector}
                        onReset={this.handleReset}
                        onChangedValue={this.onChangedValue}
                    >
                        <p>{selector.color}:</p>
                        <p>amount availible: {selector.availability}</p>
                    </Selector>
                ))}
            </div>
        );
    }
}

Selector Component

import React, {Component} from "react";

export default class Selector extends Component {
    state = {
        value: this.props.selector.value,
    };

    handleIncrement = () => {
        this.setState(prevState => {
            return {value: prevState.value + 1}
        }, () => this.props.onChangedValue(this.props.selector, this.state.value));
    };

    handleDecrement = () => {
        this.setState(prevState => {
            return {value: prevState.value - 1}
        }, () => this.props.onChangedValue(this.props.selector, this.state.value));
    };

    render() {
        return (
            <div>
                {this.props.children}
                <span>{this.state.value}</span>
                <button
                    onClick={this.handleIncrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    +
                </button>
                <button
                    onClick={this.handleDecrement}
                    className="btn btn-secondary btn-sm m-2"
                >
                    -
                </button>
                <button
                    onClick={() =>
                        this.setState({
                            value: 0,
                        })
                    }
                    className="btn btn-danger btn-sm m-2"
                >
                    Reset
                </button>
            </div>
        );
    }
}