How to modify value passed by props

Question

I'm a begginer in React and would like to figure out how to modify values get using props.

f.e:

I have a MobX GameStore.tsx with @observable values:

export class GameStore {
    @observable money = 0;
    @observable CPS = 0;
    @observable taskCodeLines = 0;
    @observable taskCodeLinesTarget = 10;

...

    @observable staffFrontEndCount = 4;
    @observable staffFrontEndStartCost = 100;

    @observable staffPHPCount = 2;
    @observable staffPHPStartCost = 250;
}

Now I want to have a few StaffMember objects in Staff class:

render() {
    return(
        <div className="staff">
            <ul className="staff-list">
                <StaffMember job="Front End Developer" count={ gameStore.staffFrontEndCount } startCost = { gameStore.staffFrontEndStartCost } />
                <StaffMember job="PHP Developer" count={ gameStore.staffPHPCount } startCost = { gameStore.staffPHPStartCost } />
            </ul>
        </div>
    );
}

I pass down a data like name of this objects and some values. And now I want to modify some of them, like:

@observer
export default class StaffMember extends React.Component<any, any> {

@computed get increaseStaffCount() {
    return this.props.count;
}


@action hireStaff() {
    let cost = this.props.startCost * 1.4 * (this.props.count + 1);

    if (gameStore.money >= cost) {
        gameStore.money -= cost;

        this.props.count += 1; // It's illegal because props data is read-only
        this.countCPS();
    }


}

How can I do this? Is this OK to create logic like above? How should I create instances of classes in react and build a generic methods for them? Thanks for help ;)

Answer 1

The answer to that would be after passing the props inside StaffMember put it inside a state then from there you can modify the state :)

Answer 2

React does not allow the modification of props values over the course of a component's life. And there are currently two ways it has gotten around the need to change the value of props.

1. Load it into a state
2. Utilize Redux

---

On the first item, as xSkrappy said before, you can load the props into a Component's state, which can be updated over the course of a component's life, adding this method inside the Component in the following manner:

componentDidMount() {
    this.setState({ count: this.props.count })
}

This creates a local state in the component that is equal to the prop value that was passed down to the component from its parent. And you can begin to change it from there.

You can also use the componentWillReceiveProps lifecycle method to re-render the component when the props value changes in its parent component, like such:

componentWillReceiveProps(nextProps) {
    if(nextProps.count !== this.props.count) {
        this.setState({ count: nextProps.count })
    }
}

---

The second method involves utilizing Redux, a state container that can be used in React applications. Its pattern involves creating a store where the state of the entire application can be managed, and any given component can be connected to that store and receive that state as props.

While utilizing Redux is a lot more complex than the first option given, in the end you are given a lot more freedom because you can make your count value accessible to any component in your application!

Sadly implementing Redux is too lengthy a process to just detail in this answer, so I'll direct you to what I think is a good guide to refactoring your application to use Redux, should you wish to go with this option

Answer 3

In ReactJs, Props are immutable so you can't modify it. Instead of using Props You can use State. State are mutable you can modify it. Or, you can use Redux concept as per your requirement. For ex:- First make a state

this.state = {
    usersList:[]
};

then you can add modification in your state like this

componentDidMount() {
    this.setState({ usersList: this.props.count})
}