SHARE
TWEET

Untitled

a guest Mar 25th, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * Componente de imagem
  3.  */
  4.  
  5. const CarImage = ({ img }) => <img src={img} />
  6.  
  7. /**
  8.  * Componente de radio
  9.  */
  10.  
  11. const CarChoice = ({ car, index, selectedEngine }) => (
  12.   <input
  13.     name="car-choice" // esse nome tem que ser o mesmo, o radio identifica seu grupo pelo name
  14.     value={index} // com esse value a gente acha a imagem correspondente do array
  15.     checked={selectedEngine === index} // vendo se o selecionado é esse aqui
  16.   />
  17. );
  18.  
  19. class CarCustomization extends Component {
  20.   state = {
  21.     selectedEngine: 0,
  22.   };
  23.  
  24.   componentWillMount() {
  25.     fetchStuff().then(this.setState);
  26.   }
  27.  
  28.   render() {
  29.     // Aqui a gente checa antes se ainda não tem pra já retornar cedo e economizar processamento
  30.     if (!this.state.cars)
  31.       return <Loading />
  32.  
  33.     return (
  34.       <div>
  35.         <CarImage img={this.state.cars[this.state.selectedEngine].image} />
  36.                                     // esse index aqui é o indíce do elemento que está sendo acessado no map
  37.         {this.state.cars.map((car, index) => <CarChoice car={car} index={index} selectedEngine={this.state.selectedEngine} />)}
  38.       </div>
  39.     )
  40.   }
  41. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top