We Keep Coding

Module not found: Can't resolve - React

I'm having a problem with the relative path for my react app. It seems super simple but I've double checked everything and I still can't get it to work.
The path is src > components(folder) > Navigation(folder) > navigation.js
The terminal says: "Failed to compile.
./src/App.js
Module not found: Can't resolve './components/Navigation/navigation' in '/Users/misbahhemraj/Desktop/facefind/src'"
This is my code in my app.Js:
import React, { Component } from 'react';
import navigation from './components/Navigation/navigation';
import './App.css';
class App extends Component {
render () {
return (
<div className="App">
<navigation />
{/*<Logo />
<ImageLinkForm />
<FaceRecognition />*/}
</div>
);
}
}
export default App;
This is my code in navigation.js
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default navigation;
I've tried changing the ports and changing the syntax of the import statement but I can't get it it work. Any advice would be appreciated - thank you so much!

Look at your export component name, you have navigation and your component name it´s Navigation
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default Navigation;

Passing property as pros in react functional component

I am in the process of learning react. Here i got stuck in some basic problems. I learn concept of props and parent-child components in react, but when i try to implement it, it shows error. Please help. I have one parent component named 'Portfolio' and one child component named 'PortfolioBox'. I try to pass title props in PortfolioBox. Here is my sample code. Issue comes while starting the react app 'npm start'. It shows error 'Portfolio is not defined'.
Portfolio Component
import React from 'react';
import PortfolioBox from './PortfolioBox';
import './portfolio.css';
function Portfolio()
{
return (
<div className="row portfolio-container">
<PortfolioBox title="One" />
<PortfolioBox title="Two" />
<PortfolioBox title="Three" />
<PortfolioBox title="four" />
</div>
)
}
export default Portfolio;
Portfolio Box Component
import React from 'react';
function PortfolioBox(props)
{
console.log(props);
return(
<div className="col-md-4 portfolio-box">
<h3>{props.title}</h3>
<p>Description</p>
</div>
)
}
export default PortfolioBox;
App.js File
import React from 'react';
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;

You are missing an import statement in your app.js file:
import React from 'react';
import Portfolio from './Portfolio'; // If your file is in the same directory
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;

Search component not displaying on app component in React

I am trying to get a search bar to display on my main app in React. To do this I have created a new component called searchBox to be used later and therefore I can't just directly app the input to my App.js file.
My code for my App.JS file looks like :
import React, { Component } from 'react';
import CardList from './CardList';
import searchBox from './searchBox';
import { robots } from './robots';
const App = () => {
return (
<div>
<h1> Contacts </h1>
<searchBox />
<CardList robots={robots} />
</div>
)
}
export default App;
My searchbox.js file looks like :
import React from 'react';
const searchBox = () => {
return(
<input type='search' placeholder='search contacts' />
);
}
export default searchBox;
The header is displaying but the searchbox is not. I have the file save in the src folder as searchBox so I don't think the issue is to do with saving the file in the wrong location.

User defined components must be capitalized.
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Can you capitalize S in your searchBox? React expects component names to start with capital letter.

React Js: mountNode is not defined no-undef error

I am newly learning the React Js. I found the example at this Link. But when I tried the first code:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);
export default HelloMessage;
I am getting this error
./src/App.js Line 18: 'mountNode' is not defined no-undef
Search for the keywords to learn more about each error.
I have already seen the answer at this StackOverflow link. But I'm sorry I couldn't get what is explained there. Provide me the suggestions. Thank you in advance!

The error message you are getting is a linting error. (static code analysis)
Make sure your mountNode variable exists.
or use something like:
render(<HelloMessage />, document.getElementById('app'));
Also make sure that you have a DOM element with id app in your HTML code:
for example:
<div id="app" />

The ReactDOM.render() method is already located under
src/index.js
like:
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
The above code renders over component in the root div located in the public/index.html
src/App.js
--->initially it looked like:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Finally --> Now instead of rendering the App Component...we can either write the HelloMessage component under the same file or replace the App Component with something like this..
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div>
Hello {this.props.name}
</div>
</div>
);
}
}
After that I'm able to see the Hello Message in the browser localhost:3000. But the Name Taylor is not displayed there...So what I did is passed the name props from the index.js file something like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//Passed the name props to the
ReactDOM.render(<App name = "Taylor"/>, document.getElementById('root'));
registerServiceWorker();
Now After this point I got the successful output Hello Taylor. If you are replacing the App component with HelloMessage component, don't forget to import that file in the index.js

cannot diplay the json data on browser

i have testdata.json file which contains json data, when i try to execute the code below i am getting an error as "A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object". what should i do now?
this is contestpreview.js file:
import React from 'react';
const ContestPreview = (contest) => {
<div className = "contestPreview">
<div>
{contest.categoryName}
</div>
<div>
{contest.contestName}
</div>
</div>
};
export default ContestPreview;
This my app.js file:
import React from 'react';
import Header from './Header';
import ContestPreview from './ContestPreview';
class App extends React.Component {
state= { test : 7};
render(){
return(<div>
<div>
<Header message = "Naming contests"/>
</div>
<div>
<ContestPreview {...this.props.contests}/>
</div>
</div>
);
}
};
export default App;
This is my index.js file:
import React from'react';
import ReactDom from 'react-dom';
import data from './testData';
console.log(data);
import App from './components/App';
ReactDom.render(
<App contest = {data.contest}/>,
document.getElementById('root')
);

Your ContentPreview component doesn't return a React Component. It's a small error on your part, but you can fix this by either adding a return statement, or by replacing your curly-braces with parenthesis.
Like so:
const ContestPreview = (contest) => (
<div className = "contestPreview">
<div>
{contest.categoryName}
</div>
<div>
{contest.contestName}
</div>
</div>
);
export default ContestPreview;
or
const ContestPreview = (contest) => {
return (
<div className = "contestPreview">
<div>
{contest.categoryName}
</div>
<div>
{contest.contestName}
</div>
</div>
);
};
export default ContestPreview;
The latter allows you to add some application logic before the return, if you want (though discouraged).
Since you're using a stateless functional component, you may find my previous answer on the pros/cons of these interesting.
Good luck!