React - change this.state onClick rendered with array.map()

8-Bit Borges

I'm new to React and JavaScript.

I have a Menu component which renders an animation onClick and then redirects the app to another route, /coffee.

I would like to pass the value which was clicked (selected) to function this.gotoCoffee and update this.state.select, but I don't know how, since I am mapping all items in this.state.coffees in the same onClick event.

How do I do this and update this.state.select to the clicked value?

My code:

class Menus extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        coffees:[],
        select: '',      
        isLoading: false,
        redirect: false
    };
  };
  gotoCoffee = () => {
    this.setState({isLoading:true})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)
  }

  renderCoffee = () => {
    if (this.state.redirect) {
      return (<Redirect to={`/coffee/${this.state.select}`} />)
    }
  }

  render(){
    const data = this.state.coffees;

    return (
      <div>
        <h1 className="title is-1"><font color="#C86428">Menu</font></h1>
        <hr/><br/>
        {data.map(c => 
          <span key={c}>
            <div>
               {this.state.isLoading && <Brewing />}
               {this.renderCoffee()}
              <div onClick={() => this.gotoCoffee()} 
                  <strong><font color="#C86428">{c}</font></strong></div>
            </div>
          </span>)
        }
      </div>
    );
  }
}

export default withRouter(Menus);

I have tried passing the value like so:

  gotoCoffee = (e) => {
    this.setState({isLoading:true,select:e})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000) 
    console.log(this.state.select)
  }

an like so:

<div onClick={(c) => this.gotoCoffee(c)} 

or so:

<div onClick={(event => this.gotoCoffee(event.target.value} 

but console.log(this.state.select) shows me 'undefined' for both tries.

It appears that I'm passing the Class with 'c'.

browser shows me precisely that on the uri at redirect:

http://localhost/coffee/[object%20Object]


Now if I pass mapped 'c' to {this.renderCoffee(c)}, which not an onClick event, I manage to pass the array items.

But I need to pass not the object, but the clicked value 'c' to this.gotoCoffee(c), and THEN update this.state.select.

How do I fix this?

mukesh210

You can pass index of element to gotoCoffee with closure in render. Then in gotoCoffee, just access that element as this.state.coffees[index].

gotoCoffee = (index) => {
    this.setState({isLoading:true, select: this.state.coffees[index]})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)
  }

  render(){
    const data = this.state.coffees;

    return (
      <div>
        <h1 className="title is-1"><font color="#C86428">Menu</font></h1>
        <hr/><br/>
        {data.map((c, index) => 
          <span key={c}>
            <div>
               {this.state.isLoading && <Brewing />}
               {this.renderCoffee()}
              <div onClick={() => this.gotoCoffee(index)} 
                  <strong><font color="#C86428">{c}</font></strong></div>
            </div>
          </span>)
        }
      </div>
    );
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React onClick event in array.map()

React change state in array (for loop)

React: Children onclick to change parent's state for re-rendering

How to change the state of an item affected by onClick in array?

Change a 2d array in React state

React state is not being re-rendered after change

React-Redux - onClick firing on every state change

change state for onClick event in other component react

How to change state on multiple elements in React during onClick event

Change in state not being rendered with object.map

How to change an array element in state in a React

React - change state right after previous state change was rendered

Change State using OnClick event on REACT TSX

React mapped state text rendered as is

React Native: Array.map()-based rendered components not updating on state change

React onClick taking an extra click to change state

Get Rendered Layer Onclick React

Change state onClick React+Redux

Map of React Components not re rendering on State Change

React state.map return empty array

Insert React state variable into rendered array

Change values of array using state React Native

Applying state change to specific index of an array in React

React map presigned URLs to state or array

React Hook doesn't re-render array.map after state change

React: change a state in parent and in child onClick

How can I change state of object in a React list onClick?

How can i change state in React for a single item inside map with onClick button?

React setting the state of all rendered items with .map in parent component

TOP Ranking

HotTag

Archive