Here you can see my code in React.js
I want to have several modal windows in one React component. I tried to use Modal from “react-native”, but it didn’t work.
Now I’m trying to use my own realisation of modal window, you can see it here. I want to use this component for creating modal windows according to parameters.
Unfortunately, this component creates modal windows with default values (null). I have watched lots of tutorials, but I still don’t know how to fix it.
I will be very grateful for help.
I asume that you are passing some value to title.
You can add some ternary operators in the jsx structure:
<div className="modalTitle">{title ? title : "what ever value you want"}</div>
Or you can add/set loader:
return (
<>
{title ? (
<div>Your modal content here</div>
) : (
<div>Your loader here</div>
)}
</>
);
Related
I am looking for someone to help me with the following issue:
I am trying to implement a modal system where the modals are dependent on the route using NextJS.
So say I am on the following page:
website.com/help
and say I have the modals category1, category2, and category3, all of which I would prefer to be able to persist after closing them (they are loading iframes), however this is not a must.
Then I would want the routes for these modals to be:
website.com/help/category1
website.com/help/category2
website.com/help/category3
I have already found this in the official NextJS examples:
with-route-as-modal
But the problem I am having is that with queryString routing, when you reload/visit the modal route directly, the modal wont be used. So the content will become full screen (it is a page of its own).
With dynamic routing, this is not an issue, since if you visit the modal route directly the modal will be kept. But the problem I am having with this is that these modals aren't exactly modals, the original page "behind" the modal just becomes the body background. The other issue is that I wont be able to persist these.
Here is the demo on stackblitz:
https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-route-as-modal?file=README.md
I would appreciate anyone helping me with this so much because it has really driven me mad trying to solve this!
I have a solution that you may like. For the example you provided you only need to import <Grid/> in /article/[articleId].js like it's done in /index.js
so when you open the modal the articles/posts list is shown in the background
// article/[articleId].js
import Grid from '../../components/Grid';
<>
<Modal
isOpen={true}
onRequestClose={() => router.push('/', undefined, { scroll: false })}
contentLabel="Post modal"
>
<Article id={articleId} pathname={router.pathname} />
</Modal>
<Grid />
</>
don't forget to give scroll false in router.push() and <Link/> so when you go back to articles/posts list it doesn't jump to the top of the page
router.push('/', undefined, { scroll: false })
<Link
key={index}
href="/article/[articleId]"
as={`/article/${id}`}
scroll={false}
>
<a className={styles.postCard}>{id}</a>
</Link>
you can see an example here: https://stackblitz.com/edit/github-rkrovd
Right below the page you see a 'back to log' button. If someone clicks on that it will return to the left page. So in order to do so I thought using react router will do the job. But not sure how to fix that.Is there someone who can help me to point me to the right direction. Keep in mind that it will not open a new tab!
Link to working snippet to understand the bigger picture of my app. CodeSandBox snippet here
return (
<div>
{info.map((show: any) => {
console.log(show.show)
return (
<div key={show.show.id}>
<ReactMarkdown source={show.show.name}/>
{show.show.image && <img src={show.show.image.medium}/>}
{show.show.genres.map((showGenre: string, index: number) => {
return (
<div key={index}>
<ReactMarkdown source={showGenre}/>
</div>
)
})}
<div>
<Router>
<ul>
<li>
<Link to="/">See deta</Link>
</li>
</ul>
</Router>
</div>
</div>
)
})}
</div>
)
Check out this working example (I placed notes in each file):
https://codesandbox.io/s/modest-panini-hkzlv?file=/src/App.js
Overview:
there are several ways to do this
my suggestion is to use the history npm and create a history.js file
you will also need to use Router from react-router-dom
in your parent component, or in a Context provider, you can store your state
in the parent component, use react-router-dom Switch and Route to place routes
depending on implementation, conditionally render show route for async state update
in your search component, place all your Links using react-router-dom
on click Links should also update app's state of your specific selection
this selection gets passed to the show route/component
in the show component attach an on click that uses history.goBack and resets state
this might help you:
this.props.history.goBack();
it goes back to prev page
My issue is specifically related to debugging those elements that render on the [root] via the virtual DOM. Most specifically, the materialUI AutoComplete component. I need to style it to fit several color themes, therefore I can't use style:{{color:#eee}} because that would override the default color and replace it by a new one. Instead I need to play around with specificity to make it white, or black, or red, etc, according to the parent theme that I am using.
Anyway, It is impossible for me to inspect it in Chrome Dev Tools because once the mouse leaves the autoComplete input, the dropdown closes and I can't inspect it. Normally, I counter this by using debugger; or The Sources section of Chrome Dev Tools but reactJS scripts compile and bundle through webpack, so they are impossible to access in dev tools as well.
Does anyone know how I can stop a reactJS script at the Autocomplete line in the component class?
class Header extends React.Component {
render() {
return (
<section>
<div> SOme code here</div>
//debug somewhere inside the autocomplete below to stop it as it renders
<AutoComplete
className='search-item'
style={{width: '100%'}}
hintText="Type anything"
filter={AutoComplete.caseInsensitiveFilter}
fullWidth={true}
dataSource={shortcutsData}
/>
</section>
);
}
}
The link below shows the non-reactJS way. Which doesn't work for me
How to pause JS script execution at a specific line?
Thanks in advance
You can place a debugger tag anywhere in the js script and it gets paused on runtime, something like this
debugger;
For example, if I have to place it in your code then
class Header extends React.Component {
render() {
debugger;
return (
<section>
<div> SOme code here</div>
//debug somewhere inside the autocomplete below to stop it as it renders
<AutoComplete
className='search-item'
style={{width: '100%'}}
hintText="Type anything"
filter={AutoComplete.caseInsensitiveFilter}
fullWidth={true}
dataSource={shortcutsData}
/>
</section>
);
}
}
And it will get paused there when you run the app.
Hope this helps!
I have a list of link-elements, the clicked link-element shall have another background-color. What is the best way to achieve that in react.js ?
render() {
return (
<div>
<Link></Link>
<Link></Link>
....
You should simply be able to apply the acctiveClassName attribute to the Link like so
<Link to="/about" activeClassName="active">About</Link>
see this link for more info.
I have this simple React JS + Redux app.
Decided to create a version of it using Onsen UI, I'm receiving no errors and there's output but the Onsen UI isn't rendered at all.
Here is the pic:
Here is my render function :
render() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (
<Ons.ListItem tappable key={index} modifier='longdivider' >
<div className={'list' + listingData.location_id}>{listingData.location_id}</div>
<div>{listingData.location}</div>
<div>{listingData.description}</div>
</Ons.ListItem>)} />
<div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div>
</Ons.Page>
);
}
Here is my renderToolbar function:
renderToolbar() {
return (
<Ons.Toolbar>
<div className='center'>My app</div>
<div className='right'>
<Ons.ToolbarButton /*onClick={}*/>
<Ons.Icon icon='md-more-vert' />
</Ons.ToolbarButton>
</div>
</Ons.Toolbar>
);
}
I've checked the modules are all imported, I also bind the functions in my constructor so it should work but why do I not have any UI?
PS: I'm using Onsen v2.0 & React-Onsenui 0.6.2
Anything I missed? Or is there something wrong in my code?
Unlike React native's way of styling its components Onsen UI has normal CSS files, which need to be included in order for it to work properly.
You can add them via link tags to the dom or if you're using webpack you can just require them.
The files should be something like
onsenui/dist/css/onsenui.css
onsenui/dist/css/onsen-css-components.css
You said you're not getting any errors in the console, so a lack of styles seems like the most likely cause.
Also if you're interested you can checkout the repo of a demo kitchensink app here.
And finally this may be a little off-topic, but you could try monaca cli as with it you can easily start from a working boilerplate.