Update item in state onClick ReactJS

Question

So, I have class Comopnent :

 state = {
    tokens: [
    {
      name: "first",
      value: 3
    },
    {
      name: "second",
      value: 2
    },
    {
      name: "third",
      value: 4
    }
  ]
  }
  handleClick = (name, id) => {
    const newState = this.state.tokens.map((token => {
    console.log(token.name)
    }))
  }
render() {
    const token = this.state.tokens;

    const tokenList = token.map(t => {
      return (
      <div value={t.name} onClick={() => this.handleClick(t.name, t.value)}>
        <img src=""/>

        </div>
      )
    })

What i need to do - after click - to subtract 1 from value clicked token. So - ex. after click on "First" token i want his value equal 2. So far I've done just as much as the above. I do not know how to go about it, i am new in ReactJS, so thanks for help in advance!

kind user · Accepted Answer · 2018-12-01 21:31:21Z

1

You'll have to find in your state in tokens array the object which has the same name as the argument passed in the onclick handler. Then you will have to change it's value - decrement it (value--) but you have to be aware that you can't mutate the state.

 handleClick = name => () => {
    const { tokens } = this.state;
    const clickedToken = tokens.find(token => token.name === name);
    clickedToken.value--;
    const clickedTokenIndex = tokens.indexOf(clickedToken);
    const newTokens = [
      ...tokens.slice(0, clickedTokenIndex),
      clickedToken,
      ...tokens.slice(clickedTokenIndex + 1)
    ];

    this.setState({ tokens: newTokens });
  };

Codesandbox link: https://codesandbox.io/s/92yz34x97w

answered Dec 1, 2018 at 21:31

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miguel Angel · Accepted Answer · 2018-12-01 21:47:09Z

First, some things are wrong with your code. 1- You have an array of tokens, then you're mapping the list, but you don't have a key to index, this will cause weird behaviors, I improve your tokens list with keys now.

2.- You can handle the click and change the state of the tokens list, this will trigger a reload of the component.

state = {
    tokens: [
    {
      name: "first",
      value: 3,
      id: 1
    },
    {
      name: "second",
      value: 2,
      id: 2
    },
    {
      name: "third",
      value: 4,
      id: 3
    }
  ]
  }
  handleClick = (name, id) => {
        const { tokens} = this.state;
        const newState = tokens.map((token => {
                if(token.id === id) {
                        token.value--;

                }
        return token;
    }))
  }
render() {
    const token = this.state.tokens;

    const tokenList = token.map(t => {
      return (
      <div key={t.key} value={t.name} onClick={() => this.handleClick(t.name, t.value, t.key)}>
        <img src=""/>

        </div>
      )
    })

Collectives™ on Stack Overflow

Update item in state onClick ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related