CODEWITHSUNDEEP
javascriptreactjscomponents
Edward DeLeon Jr
Edward DeLeon Jr

Reputation: 3

React: Component Structure, is it out of context for use?

I am starting a React Project. I am trying to construct the message board page and I have Components for the Left, Center, and Right Portion of the page. The Center is where the user posts will go. Left and Right are News, Events.. etc.

My file structure is as follows: 

--client
----Public
------|index.html
--------src
----------components
-----------Center
------------|CenterForm.js
------------|Post.js
-----------Left
-------------|LatestNews.js
-------------|LeftForm.js
-------------|Trending.js
-------------|WatchList.js
-----------Whole
-------------|WholeComponent.js

Ultimately, I wanted to construct each piece then combine them in the whole component so that row and columns would be smooth. I get this error: ./src/components/Whole/WholeComponent.js Module not found: Can't resolve './components/Center/CenterForm' in '/Users/edwarddeleon/Desktop/ct-app/client/src/components/Whole' and for the Left when I remove the center section.

CenterForm Component: 

import React from 'react';
import Post from './Post';

const CenterForm = () =>

  <div className="col 4">
    <Post />
  </div>

export default CenterForm;

Post Component(will be changed when I go to implement user comment function):

import React from 'react';

const Post = () =>

  <div className="posthere">
    <span>post will be here</span>
  </div>

export default Post;

Whole Component: 

  import React from 'react';

  import LeftForm from './components/Left/LeftForm';
  import CenterForm from './components/Center/CenterForm';



const WholeComponent = () =>

<div className="container">
 <div className="row">
      <LeftForm />
      <CenterForm />
    </div>
  </div>

export default WholeComponent;

App.js:

import React, { Component } from 'react';

import Nav from "./components/Nav";

import WholeComponent from './components/Whole/WholeComponent';


class App extends Component {
  render() {
    return (
      <div className="App">
        <Nav />
        <WholeComponent />

      </div>
    );
  }
}

export default App;

Thank you Community!

Upvotes: 0

Views: 200

Answers (1)

Abid Rakhmansyah
Abid Rakhmansyah

Reputation: 966

You have false path for the component.

Your import in the WholeComponent should be like this

  import LeftForm from '../Left/LeftForm';
  import CenterForm from '../Center/CenterForm';

Because, you need to backward the directory where Center and Left component are placed.

Upvotes: 2

Related Questions