App.js

import React, { Component } from 'react';
import './App.css';
import News from './News/News';
import Sidenews from "./News/Sidenews";
import Planet from "./Elements/Planet";

class App extends Component {

  constructor() {
    super();
    this.state = {
      planets: [],
    };
  }

  componentDidMount() {
    let initialPlanets = [];
    fetch('https://swapi.co/api/planets/')
      .then(response => {
        return response.json();
      }).then(data => {
        initialPlanets = data.results.map((planet) => {
          return planet
        });
        console.log("check data 1 : ",initialPlanets);
        this.setState({
          planets: initialPlanets,
        });
      });
      console.log("check data 2",this.state.planets);
  }

  render() {
    return (
      <div className="container-fluid">
        <div className="navbar-fixed">
          <nav>
            <div className="nav-wrapper indigo lighten-4">
              <a href="#/" className="bran-logo center">My Feed</a>
            </div>
          </nav>
        </div>
        <div className="row">
          <div className="col s8">
            {/* <News status="10" /> */}
            <h3>Demo</h3>
            <Planet planets={this.state.planets}/>
          </div>
          <div className="col s4">
            <Sidenews />
          </div>
        </div>
      </div>
    );
  }
}

export default App;