This is the third part of Create react app with GraphQL way of WordPress data

In this part, we will build the App component at src/components/App.js

Here kick on styled-components. And we use Posts and PostWidget component here. For that, we can introduce props.

First, import CSS library, styled-components. After that, we will import two components- Posts and PostWidget components from respective file. So, let’s write

import styled from "styled-components";
import Posts from "./components/Posts";
import PostWidget from "./components/PostWidget";

In-App component, we will use the render method. Here, return our defined JSX. We will divide two areas on the page. Details of the grid can be find here, https://milligram.io/#grids. So, we write here,

render() {
    return(
        <div className="row">
          <div className="column column-80">Post Archive</div>
          <div className="column column-20">Widget</div>
        </div>
    );
  }

At our App component, we will use two returns. One return is used before the state has any post. Then return the main component. So, our render function will be,

render() {
   if (this.props.state.length) {
    return(
        <div className="row">
          <div className="column column-80">Post Archive</div>
          <div className="column column-20">Widget</div>
        </div>
    );
  }
  return <p>Loading...</p>;
  }

At post archive, we will use posts array of state of this component. posts array map every item with render Posts. We render Posts component with props name state in this mapping. For clear about the array map function, we will read this.

However, in code, it will be

{this.props.state.map(post => (
  <Posts key={post.node.id} post={post} />
))}

At Widget, we use the same code. But, before the array map, we will slice this array for the first two posts. In code

{this.props.state.slice(0, 2).map(post => (
  <PostWidget key={post.node.id} post={post} />
))}

Lets, try styled-components.
Define Widget as an div tag and it styled as our defined style.

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

Use this Widget component like this

<Widget>
   <h3>Recent posts</h3>
     {this.props.state.slice(0, 2).map(post => (
       <PostWidget key={post.node.id} post={post} />
     ))}
</Widget>

So, the final code is-

import React from "react";
import styled from "styled-components";
import Posts from "./Posts";
import PostWidget from "./PostWidget";

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

class App extends React.Component {
  render() {
    if (this.props.state.length) {
      return (
          <div className="row">
            <div className="column column-80">
              {this.props.state.map(post => (
                <Posts key={post.node.id} post={post} />
              ))}
            </div>
            <div className="column column-20">
              <Widget>
                <h3>Recent posts</h3>
                {this.props.state.slice(0, 2).map(post => (
                  <PostWidget key={post.node.id} post={post} />
                ))}
              </Widget>
            </div>
          </div>
      );
    }
    return <div>Loading...</div>;
  }
}
export default App;

Screenshot at this point will be