React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Jordan Enev

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

p {
  color: black;
}

Babel + JSX

const parseMillisecondsIntoReadableTime = duration => {
  let seconds = Math.floor((duration / 1000) % 60);
  let minutes = Math.floor((duration / (1000 * 60)) % 60);
  let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  return hours + ":" + minutes + ":" + seconds;
}

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      details: [],
      isLoaded: true,
    };
}


componentDidMount() {
   fetch("https://api.myjson.com/bins/d0f8q")
   .then(res => res.json())
   .then(result => {
     const details = result.map(item => ({
  		 ...item,
  		 top: item.top.map(top => ({
    	 	...top,
    		 performance: parseMillisecondsIntoReadableTime(top.performance)
  		  }))
		  }))
    
      this.setState({ details, isLoaded:true});
    })

   .catch(error => {
     console.log("error! ", error.message)
     this.setState({
       isLoaded: true,
       error
     });
   })
 }


  render() {
     const { error, isLoaded, details } = this.state;
    return (
    
    
    <div>
        {details.map(item => (
        	<div> 
                {item.top.map(xx => (
                	<div>
                       <p>{xx.day}</p>
                       <p>{xx.penalties}</p>
                      <p>{xx.performance}</p>
                  </div>
                
                ))}
          
          </div>
        ))}
    </div>
    
    
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);