Hi I'm a newb to reactjs and I wanted to try pulling some code from other libraries to see how it works. Unfortunately, I'm sort of stuck on trying to use the react-responsive-carousel. I realize this is a really simple question but I have been stuck on this for quite some time now and would appreciate any tips! Thank you so much!
Here is what I'm currently trying:
Index.jsx
import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.jsx';
import CarouselComponent from './Carousel.jsx'
class App extends React.Component {
render() {
return (
<div>
<p>Hello React!</p>
<AwesomeComponent />
<CarouselComponent />
</div>
);
}
}
render(<App/>, document.getElementById('container'));
Carousel.jsx:
import React from 'react';
import Carousel from 'react-responsive-carousel';
class CarouselComponent extends React.Component {
render() {
return (
<div>
<Carousel>
<div>
<img src="assets/1.jpeg" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="assets/2.jpg" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="assets/3.jpg" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
</div>
);
}
}
export default CarouselComponent;
The error I'm seeing in the console right now is:
Warning: React.createElement: type is invalid -- expected a string (for
built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's
defined in. Check the render method of `CarouselComponent`.
in CarouselComponent (created by App)
in div (created by App)
in App
Try importing react-responsive-carousel with braces. Like:
import { Carousel } from 'react-responsive-carousel';
Related
I am just started working with react js for couple of days it throws error like
src\App.js
Line 2:8: 'navbar' is defined but never used no-unused-vars.this error occurs while i am importing the navbar component into my app.js, i did install eslint package and update my npm version also,i really dontknow what to do .i would really appreciate if u guys provide solution
Below code is my app.js:
import React from 'react';
import navbar from"./components/navbar";
import './App.css';
function App() {
return (
<div className="App">
<navbar />
</div>
);
}
export default App;
below is my navbar.js code which i am trying to import in the app.js
import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";
class navbar extends Component{
render(){
return(
<nav className="navbarItems">
<h1 className="navbar-logo">React<i className="fab fa-react"></i>
</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((items,index)=>{
return(
<li key={index}>
<a className={MenuItems.cname}href={items.url}>
{items.title}
</a></li>
)
})}
</ul>
</nav>
)
}
}
export default navbar;
I am unable to load images despite of correct src given can anyone tell silly mistake in it!
I am absolute noobie so what is thing I am doing wrong ? in react img tag <img src={} /> this how i think codes are written in it!
Template.js Code
import React from 'react';
import './Template.css';
function Template () {
return (
<div>
<div className="shape header-shape-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-tow animation-one">
<img src={"./shape2.png"} alt="shape"></img>
</div>
<div className="shape header-shape-three animation-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-fore">
<img src={"./shape4.png"} alt="shape"></img>
</div>
</div>
);
}
export default Template;
App.js Code
import React from 'react';
import NAVBAR from './components/Navbar/navbar';
import Template from './components/shape/Template'
class App extends React.Component
{
render()
{
return (
<div>
<Template />
<NAVBAR />
</div>
);
}
}
export default App;
Create a folder inside the public folder called images and move all your images there. Then, when referencing the path for your images do it like this: <img src="./images/shape1.jpg" alt="shape" />
based on React Docs and this medium article, I did something as simple as this to try profiler in react
import React, { unstable_Profiler as Profiler } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => {
console.log(`${id}'s ${phase} phase:`);
console.log(`Actual time: ${actualTime}`);
console.log(`Base time: ${baseTime}`);
console.log(`Start time: ${startTime}`);
console.log(`Commit time: ${commitTime}`);
};
render () {
return (
<div>
<Profiler id="app" onRender={this.logProfile}>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
</Profiler>
</div>
);
}
}
export default App;
but this is throwing following error
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
Can someone tell me what I am doing wrong here?
I face the same issue and I change the import object from unstable_Profiler to Profiler directly and it works.
// import React, { unstable_Profiler as Profiler } from 'react';
import React, { Profiler } from 'react';
const App = () => (
<div>
<Profiler>
<OtherComponents />
</Profiler>
</div>
)
I check the test scenario of Profiler here at github.
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} />
}
Hi just started to learn basics of React and have problem with rendering my component in another component.
<Header> component imported in index.js is not showing.
Index.js:
import React, {Component} from 'react';
import { render } from 'react-dom';
import Header from './components/Header';
import Home from './components/Home';
class App extends Component{
render(){
return(
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<div className="col-xs-10 col-xs-offset-1">
<Header />
</div>
</div>
</div>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
</div>
</div>
</div>
);
}
}
render(<App />, window.document.getElementById('container'));
I have this error:
Error: Minified React error #130; visit http://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Header.js component also:
import React from "react";
export class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<ul className="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
);
}
}
When you open up the URL it says:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
Which means:
you forgot to import Header in a file
you import it incorrect way,
Header is not exported in a file
all of the above
After your edit:
You need to fix export (like I wrote above) to:
export default class Header extends React.Component {
you miss the default.
import React from "react";
export default class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<ul className="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
);
}
}
Use the default keyword while exporting the Header.js
it'll start working fine :)