We Keep Coding

Image is not rendering in the DOM while passing as props in the App.js file?

I am passing the image name as props in the instance of the Card component in App.js. Then I am receiving it from the Card component and render it to the DOM. But my image is not showing in the DOM. What could be the reason?
This is my App.js
import React from "react";
import "./style.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";
import "./images/image12.png";
import "./images/Star1.png";
function App() {
return (
<div className="App">
<Navbar />
<Hero />
<Card
img="image12.png"
star="Star1.png"
obtainedRating={5.0}
TotalRating="6-USA"
briefText="Life lessons with Katie Zaferes"
price="$136"
person="/person"
/>
</div>
);
}
export default App;
Here is my Card component
import React from "react";
import "../style.css";
import "../images/image12.png";
import "../images/Star1.png";
export default function Card(props) {
console.log(props);
return (
<div className="card--section">
<img src={`../images/${props.img}`} className="card--image" alt="Katie" />
<div className="rating">
<img
src={`../images/${props.star}`}
className="star--image"
alt="star"
/>
<small>
{props.obtainedRating} <span>{props.totalRating}</span>
</small>
</div>
<p className="brief-text">{props.briefText}</p>
<p className="price">
<strong>{props.price}</strong>
{props.person}
</p>
</div>
);
}
This is my Folder structure
src
-components
-Card.js
-images
-image12.png
-Star1.png
-App.js
-index.js

This is not working because you need to import an image like this and then put imageName as the value of src attribute. You can give any name you like.
import imageName from "../images/image12.png";
src={imageName}

Import images like:
import img12 from '../images/image12.png'
import star1 from './images/Star1.png'

The image path can retrieved by using the import statement
like below
import "./styles.css";
import clouds from "./Images/clouds.jpeg";
import CardImage from "./CardImage";
export default function App() {
console.log("cloud path", clouds);
return (
<div className="App">
<CardImage path={clouds} alt="clouds" />
</div>
);
}

I have found the solution.I simply imported
import cardImage from "./images/image12.png"
import star from "./images/Star1.png"
And used them in App.js
<Card img={cardImage} star={star}/>

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;

ReactJS is not rendering children

this is my simple home.js code. None relevant code has been removed.
import Banner from '../components/Banner'
export default function Home() {
return (
<Hero>
<Banner title="luxurious rooms" subtitle="delux rooms starting at $299">
<Link to="/rooms" className="btn-primary">
Our rooms
</Link>
</Banner>
</Hero>
and this my banner.js
import React from 'react'
export default function Banner({childern,title,subtitle}) {
return (
<div className="banner">
<h1>{title}</h1>
<div />>
<p>{subtitle}</p>
{childern}
</div>
)
}
I don't understand why it is not rendering.
In the bedg I contd see <banner>. tag inside of hero.
How can I solve this issue?

Ok, I created a pen for this, but it's not saving so I'll add the code here. It looks like you are taking a difficult approach for a relatively easy concept. When you pass props to a component, you access them within that component using this.props.nameOfProp. You don't need to pass link as a child, just add Link inside the child component, and pass the info you need for the Link as props.
EDIT: Here's a working example https://codesandbox.io/embed/elegant-fast-m52bt
import React from "react";
import ReactDOM from "react-dom";
import Banner from "./Banner";
import { BrowserRouter as Router } from "react-router-dom";
class App extends React.Component {
render() {
return (
<div>
<Banner
title={"luxurious rooms"}
subtitle={"delux rooms starting at $299"}
path={"/rooms"}
classList={"btn-primary"}
/>
</div>
);
}
}
ReactDOM.render(
<Router>
<App />
</Router>,
document.querySelector("#app")
);
Then your banner should look something like this:
import React from "react";
import { Link } from "react-router-dom";
class Banner extends React.Component {
render() {
return (
<div className="banner">
<h1>{this.props.title}</h1>
<p>{this.props.subtitle}</p>
<Link
to={this.props.path}
className={this.props.classList}
>
Link Text (could also be a prop)
</Link>
</div>
);
}
}
export default Banner;

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!

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.

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