vytautaspro

export default class Ticker extends React.Component { state = { value: 0 } constructor (props){ super(props); var val=this.props.pair.toUpperCase().split("_"); console.log(val); fetch("https://min-api.cryptocompare.com/data/price?fsym="+val[0]+"&tsyms=USD").then(r => r.json()).then(res => {this.setState({value:  res.USD})}); } render(){ const { pair } = this.props; return ( <div className="ticker"> <p>{pair.toUpperCase().replace('_', ' to ')}</p> <p>{this.state.value}</p> </div> ) } }

export default function( {pair} ) { return ( <div className="ticker"> <p>{pair.toUpperCase().replace('_', ' to ')}</p>  <p>12 000</p> </div> ) } keitimas į statefull export default class Ticker extends React.Component { render(){ const { pair } = this.props; return ( <div className="ticker"> <p>{pair.toUpperCase().replace('_', ' to ')}</p>  <p>12 000</p> </div> ) } }

import React from 'react'; import "./Ticker.css" export default function( {pair} ) { return ( <div className="ticker" > <p>{pair.toUpperCase().replace('_', ' to ')}</p> <p>12 000</p> </div> ) }

Aps import React, { Component } from 'react'; import './App.css'; import currencies from './currencies' import Ticker from './Ticker/Ticker' class App extends Component {   state = {     selectedPairs: []   } ....   render() {     return (       ....         <main>           {this.state.selectedPairs.map( pair => <Ticker pair={pair}/> ) }         </main>       </div>     );   } } export default App; ir pats komponentas: import React from 'react'; export default function( {pair} ) { return ( <div> <p>{ pair .toUpperCase().replace('_', ' to ')}</p> <p>12 000</p> </div> ) }

export default [ 'eth_usd', 'nmc_usd', 'ppc_usd', 'cam_usd', 'cann_usd', 'uro_usd' ] Apsas import React, { Component } from 'react'; import currencies from './currencies' class App extends Component {   state = {     selectedPairs: []   }   handleCheckbox = currency => event => {     const { checked } = event.target;     this.setState (({ selectedPairs }) => {       let pairs =  [...selectedPairs]; / /kopija masyvo       if (checked) {         pairs.push(currency) //pridedame naują       } else {         pairs = pairs.filter(pair => pair !== currency) //"triname" jau esantį - filtruojam       }       return {         selectedPairs: pairs //modifikuotą kopija gražiname į 'steitą'       }      })   }   render() { ...

  handleCheckbox(currency) {     return function(event){       ...     }   } arba trumpiau   handleCheckbox = currency => event => {}

const { checked } = event.target analogas const checked = event.target.checked;  handleCheckbox = currency => event => {     const { checked } = event.target; ....       if (checked) {         pairs.push(currency)       } else {         pairs = pairs.filter(pair => pair !== currency)       } ...     })   }

JavaScript: {curr.toUpperCase()}

{ !!props.duomenys.kt ?  <tr><th scope="row">12</th><td>Papildoma informacija</td><td>{props.duomenys.kt}</td></tr> : ''}

data: export default [ 'eth_usd', 'nmc_usd', 'ppc_usd', 'cam_usd', 'cann_usd', 'uro_usd' ] unikalus key: {currencies.map(curr => <li key={curr}>{curr}</li>)} blogiausiu atveju index {currencies.map((curr, index) => <li key={index}>{curr}</li>)}

npm npm init react-app my-app npm init <initializer>  is available in npm 6+