I found a React lightbox example here. I am trying to make slight modifications to it and one of those modifications is that I want to include it in another component. I attempted to do that by changing render(<App />, document.getElementById('app')); to export default App and then importing it into my component. But when I do that I get Cannot read property '0' of undefined Here's how I am importing it:
import React from "react";
import LB from "./LB";
import "./styles.css";
export default function App() {
return <LB />;
}
Here's my attempt
<div>
<div onClick={this.openLightbox}>Click Me</div>
<Lightbox
views={photos}
onClose={this.closeLightbox}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
currentImage={this.state.currentImage}
isOpen={this.state.lightboxIsOpen}
/>
</div>
You were passing incorrect prop. Never rely on some dubious examples, always refer to the docs. "images" should be "views"
Related
I'm trying to create a component who display source's code passed as props to write documentation of a library i work on with Docusaurus. Like html <code> or exactly like this (the blue part) :
https://mui.com/components/radio-buttons/
This is a simplified code
import React from 'react';
export default function Preview({title, description, component, code, rawComponent}) {
return (
<div>
<div><h1>{title}</h1></div>
<div>{description}</div>
<div>{component}</div>
<details>
<summary>Source</summary>
<pre>
<code>{code}</code>
</pre>
</details>
</div>
);
}
PROBLEM : i can't found how to pass code as props ....
<Preview
title={'Quick start'}
description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'}
component={<HomepageFeatures />}
code={
`
import * as React from 'react';
import ReactDOM from 'react-dom';
import HomepageFeatures from 'newlib';
function App() {
return <HomepageFeatures />;
}
`}
/>
this also doesn't work
<Preview
title={'Quick start'}
description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'}
component={<HomepageFeatures />}
code={
```
import * as React from 'react';
import ReactDOM from 'react-dom';
import HomepageFeatures from 'newlib';
function App() {
return <HomepageFeatures />;
}
```
}
/>
How to pass the code block ???
EDIT : a jsfildle https://jsfiddle.net/2pnc4htm/
it's work in pure reactJS, so it's Docusaurus who mess up ...
Thank you for reading
I believe the issue is that the curly braces are not required for the props. This only needs to be done for the in-line style of a component.
More information can be found here https://docusaurus.io/docs/next/markdown-features/react (in their examples they don’t use curly braces unless for the style)
I'm a newbie here so apologies for what might be a very elemental question.
I am trying to fiddle with different ways to import components in React by following a tutorial but I can't seem to make it work. There must be a simple tweak that I am sorely missing.
I am trying to create export a component (Person2) to another JS (App)
Person2.js
import React from 'react'
import ReactDOM from 'react-dom'
function Person2(){
return (
<div>
<h1>Millie</h1>
<p>PERSON 2</p>
</div>
);
}
/*
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('#p2')
);
*/
//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));
App.js
import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render
function App() {
return (
<div className="App">
<header className="App-header">
<p>this is the header</p>
</header>
<body>
<div class="w3-row">
<Person name="Max" age="28"/>
<Person name="Ann" age="18"/>
<div id = "p2"></div>
</div>
</body>
</div>
);
}
export default App;
Any idea where I went wrong?
I'm getting an error "Error: Target container is not a DOM element."
ReactDOM.render is usually used only for rendering your root component, I don't think you should use it in that case. With that said, the problem is the order the code is executed. You try to render your Person2 component in a node that hasn't been yet rendered, thus you get that error
Unless you have a very strange use case, you should be using export not ReactDOM.render for this example.
In Person2, change to this:
//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;
Then to use it, in App change to this:
import Person2 from './Person2'; // for default export
...
<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this
If for whatever reason your app requires the use of ReactDOM.render here, I'd add a check for safety to make sure the element exists first.
if (!!document.getElementById('p2')) {
ReactDOM.render(<Person2/>, document.getElementById('p2'));
}
I'm trying to get information from redux but this error happen and i dont know how could i fix it. That's my first time with react and react Hooks, sorry but i'm lost.
Thank you in advance.
React Hook "useSelector" is called in function "header" which is neither a React function component or a custom React Hook function
My code:
import React from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import Notifications from '../Notifications';
import logo from '~/assets/headerLogo.svg';
import { Container, Profile, Content } from './styles';
export default function header() {
const profile = useSelector(state => state.user.profile);
return (
<Container>
<Content>
<nav>
<img src={logo} alt="GoBarber" />
<Link to="/dashboard">DASHBOARD</Link>
</nav>
<aside>
<Notifications />
<Profile>
<div>
<strong>{profile.name}</strong>
<Link to="/profile">Meu Perfil</Link>
</div>
<img
src={
profile.avatar.url ||
'https://api.adorable.io/avatars/50/abott#adorable.png'
}
alt="profile"
/>
</Profile>
</aside>
</Content>
</Container>
);
}
The rules of hooks lint plugin depends on naming conventions to tell what is a component, what is a hook, and what is any other function. Functions beginning with use (eg, useEffect, useMyCustomStuff) are assumed to be hooks. Functions beginning with a capital letter are assumed to be components. Your code does neither, so it assumes this is just a normal function unrelated to hooks or components.
Rename header to Header to fix this.
I am trying to pass a property through react components and display the text property of that element I get know JSX sytax errors but I get Parsing error: Unterminated JSX contents.When attempting to display the text from the property but instead it's blank as if its not reading the property
Components.js
import React from "react"
function Components(props) {
return (<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>)
}
export default Components
App.js
import React from 'react';
import Component from "./component"
function App() {
return (
<div>
The Big World
<Component text="PROPERTY TEXT"/>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Expecting to see the property text to be pass through the Component property and displayed on the page
All looks clear. Try to add semicolon an the end of return statement:
function Components(props) {
return (
<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>
);
}
Ran all this in a codesandbox and other than style not being defined it all renders and runs fine. I also don't think it is an error with a typo in your posted code (the file is actually components.js and not component.js), because that shouldn't transpile at all since it can't find that file.
I am trying to create a App using React. I want to add a toast component globally to the app so that it can be referred by other component for displaying custom messages.
I want to add the toast in the following hierarchy:
ReactDOM.render(
<BrowserRouter>
<section>
<App />
<Toast />
</section>
</BrowserRouter>
And refer the Toast Component inside the App. How can I implement it?
you should install package
https://www.npmjs.com/package/react-toastify
and then add import and add
<ToastContainer />
in your header or some component like sidebar which is being used at every page.
You can now show toast messages on any page by just
toast.error("this is toast error");
First you need to import the ToastContainer and the CSS file :
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
and then inside the App.js add the ToastContainer on top :
<React.Fragment>
<ToastContainer />
<NavBar ... />
....
</React.Fragment>
And then you can use the toast popups in any of your components, classes and functions by importing Toast:
import { toast } from "react-toastify";
and then using it with toast() or toast.error() or toast.info() etc methods
toast("Wrong email or Password");
...
toast.error("Some kind of Error");
Hope it helps !
I've tried that approach (including ToastContainer component), but the toast.something didn't fire the event through the Toast component. The solution I've implemented was creating a function that mimics a component behavior, and instead of passing conditionals through props, pass arguments. Here's an example:
import React from "react";
import { toast } from "react-toastify";
const Toast = (message, type) => {
switch (type) {
case "success":
return toast.success(
<div>
<p>{message}</p>
</div>
);
case "error":
return toast.error(
<div>
<p>{message}</p>
</div>
);
case "warning":
return toast.warning(
<div>
<p>{message}</p>
</div>
);
default:
return toast.warning(
<div>
<p>Toast not defined...</p>
</div>
);
}
};
export default Toast;
Somewhere in the component:
Toast('Action successfully executed!', 'success');
You can pass the Toast component to App as a prop.
But this is probably not what you should do. I assume you want the Toast component to be triggered by various things other components can do. You would do this with state. Make Toast a function of state, and let other components modify state. You can do this with plane old setState, or use Redux. Though the author of Redux would tell you to just use setState.
Also because it is React there are already probably 7 libraries for doing this. This one looks promising.
Install toastify package from npm import it to your program and add the following to your program
<ToastContainer/>
You may also be interested in react-toastify so take a look at that.