1
\$\begingroup\$

I'm a new developer looking for some code review for my ES6 React Weather Application, want to learn from my mistakes and make sure I'm not picking up any bad habits. Anyone interested in pulling my repo and taking a look over my code? How's the layout? Any refactoring you can recommend? Areas that could be improved? Stupid mistakes or redundant work?

import React from 'react';
import { string, number, instanceOf, object, shape } from 'prop-types';

import Forecast from './Forecast';

ForecastDetails.propTypes = {
  location: shape({
    state: shape({
      day: object.isRequired,
      date: instanceOf(Date).isRequired,
      icon: string.isRequired,
      name: string.isRequired,
      maxTemp: number.isRequired,
      minTemp: number.isRequired,
      country: string.isRequired,
    }).isRequired,
  }).isRequired,
};

export default function ForecastDetails(props) {
  const {
    day, date, icon, name, maxTemp, minTemp, country,
  } = props.location.state;
  const details = (
    <div className="details-container">
      <ul className="details-list-container">
        <li>
          {name}, {country}
        </li>
        <li>{day.weather[ 0 ].description}</li>
        <li>max: {maxTemp} ºC</li>
        <li>min: {minTemp} ºC</li>
        <li>humidity: {day.humidity}</li>
      </ul>
    </div>
  );
  return (
    <div className="details-top-container">
      <div className="forecast-container">
        <Forecast date={date} icon={icon}>
          {details}
        </Forecast>
      </div>
    </div>
  );
}

React Open Weather Application - Github

Netlify - Live Demo

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.