In reactjs, I have already created one component and added it to my Main.js file but now, I need to add one more component to it and due to JSX restriction of having only one root element per JSX, I cannot add one more component to it. I don't know where I'm going wrong in this.
`~~~~index.js file`
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
-------------------------------------------------------
Main.js file
import React, { Component } from "react";
import Header from './Header';
// import Body from './Body';
import './index.css';
class Main extends Component {
render() {
return (
<div className="Main">
<Header image={require('./demo.jpg')}/>
{/* <Body/> */}
</div>
);
}
}
export default Main;
-------------------------------------------------------
Header.js file
import React from 'react'
import './Header.css';
// import Body from './Body';
export default (props) => {
const style= {
backgroundImage : "url(" + props.image + ")"
}
return (
<div className="body" style={style}>
<button className="btn" > Drawer </button>
<h1 className="heading1"> Questions </h1>
<button className="heading2"> Eye Button </button>
<h2 className="heading3"> Hi.. Sandeep Gautam </h2>
<h3 className="heading4"> Mind answering a few questions </h3>
</div>
)
}`
Related
This is my App.js. Here, I call the "Profile" Component.
import './App.css';
import Profile from "./Profile"
function App() {
return (
<div className="App">
<Profile />
</div>
);
}
export default App;
Then, inside Profile.js, I call Card component and inside the Card component, I've enclosed an image.
import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
return (
<Card>
<div>
<img src={image1} alt="" />
</div>
</Card>
)
}
export default Profile
Inside of Card component, I've just applied some CSS to make it look like a Card.
import React from 'react'
import styles from "./Card.module.css"
const Card = () => {
return (
<div className={styles.card}>
</div>
)
}export default Card
This is my folder structure.
I'm really confused why the image isn't getting showed up. Currently this is the output I'm getting.
I've restarted the server as well. But it's not getting fixed.
your card doesn't have a child component return maybe that could be the problem
import React from 'react'
import styles from "./Card.module.css"
const Card = ({children}) => {
return (
<div className={styles.card}>
{children}
</div>
)
}
export default Card
try this
I have the following code that produces a Card UX Component.:
import React from 'react';
import image1 from '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src="image1" alt='Image 1'/>
</div>
</div>
);
}
export default Card;
I would like to know how I can call it in one of my pages that simply produces an image at the top half of the page, and also what is the command for importing the "bootstrap.min.css" from "node_modules" in this page. The code for the page currently looks like this:
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Hero hero="servicesHero"/>
);
}
Card Import
import React from 'react';
let image1 = '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src={image1} alt='Image 1'/>
</div>
</div>
);
}
export default Card;
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Card/>
<Hero hero="servicesHero"/>
);
}
To import css file from node modules, please place the link statement in your index.html file
<link rel="stylesheet" href="./node_modules/bootstrap/bootstrap.min.css">
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}
I want to display text in the form of react component inside react app.
When I tried to render it, it gives me not defined error, which is understandable.
import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
const Header = () => {
return(
<div className="header-wrapper">
<p className="logo__tagline"> <text /> </p>
<img className="App__logo" src={logo} alt="Name" />
</div>
)
};
export default Header;
Not sure exactly what you are trying to do?
But if i understand correct you could do like this:
In the text file:
import React, { Fragment } from 'react'; // So it doesn't create a unnecessary node element. **Only available in react 16+
export const Text = () => <Fragment>Your text here</Fragment>;
and then you can bring in the text element and use it in your code:
import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
import { Text } from './Text'
const Header = () => {
return(
<div className="header-wrapper">
<p className="logo__tagline"> <Text /> </p>
<img className="App__logo" src={logo} alt="Name" />
</div>
)
};
export default Header;
Maybe i have misunderstood the question but i don't know why you would want to do this.
Sorry, i am new in React.
I have 2 components in my react application. Here is the parent:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './Searchbar';
const App =() => {
return (
<div className="App">
<div className="App-header">
<Searchbar></Searchbar>
<h2>Welcome to React</h2>
</div>
</div>
);
}
export default App;
and here is the searchbar component:
import React,{Component} from 'react';
export default class Searchbar extends Component{
render(){
return <div>Here is search bar</div>;
}
}
Unfortunately, when the page loads it complains with the error:
Uncaught ReferenceError: Searchbar is not defined
It seems that, it does not recognize the Searchbar component.
What is the problem?
The solution is really simple. You are importing the searchbar wrongly in your file. You need to import it like import Searchbar from './Searchbar'; , since you have exported it as default you also need to import it in default manner.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Searchbar from './Searchbar';
const App =() => {
return (
<div className="App">
<div className="App-header">
<Searchbar></Searchbar>
<h2>Welcome to React</h2>
</div>
</div>
);
}
export default App;