i want to build a registration web page in react, that has a checkbox, and a text along that checkbox. one word in the text is a link to a pdf file which is the terms and conditions for example. now, how can i show that pdf not as a new window tab opened, but instead in the same tab and in a modal. i used the tag with a href attribute but it opened for me a new tab, and i dont know how to get that the modal will open in the page, with like a href link that when the user click on that link (not a button. link) the modal will show.
thanks
If you want to show modal to user, set one state modal, something like this:
const [modalConf, setModalConf] = useState({show:false, mode:''})
and user click the link, you can change the state, like:
setModalConf({show:true, mode:'Terms'})
and finally, you render the modal component like this :
<Modal show={modalConf.show} mode={modalConf.mode} />
and your modal component will get mode component from props:
Modal component:
props.mode === 'Terms' && render Terms
props.mode === 'Privacy' && render Privacy
Related
I have Modal in React Js which is working fine on button click
Here is Modal
<Modal isOpen={modalIsOpen} onRequestClose={()=>setmodalIsOpen(false)}>
Here is Button on which click it is working
<button onClick={()=>{setmodalIsOpen(true)}}>Open modal</button>
Here is my function or hook
const [modalIsOpen, setmodalIsOpen] = useState(false)
That is quite simple as you can see but the task is -> with this working as weel
i want to open modal with a prop value which will be bollean(TRUE) .
Here is my prop
props.modalIsOpen
Its is containing the true value i have checked with console.
Now the question is where should i put condition to check
If there is true value in props please open the modal.
Else its working should be with hooks.
What i tried is
if(props.modalIsOpen){
setmodalIsOpen(true)
}
i know this is funny because it completely blanks my page. so i know this condition is now correct.
One more thing i am using function here on Modal page and class on the page from where props coming from.
I have a modal that is opened from an AppBar directly which let you insert data in the database.
On the current tab opened in background of modal, you can see a table with the current data, but the modal and the table aren't related. The page with the table is a route /Dashboard while the modal is just the modal, can be opened on front of any route.
I want that after you press the "Add" button in the modal to call the function that makes the get request on the /Dashboard route (which have the same named component).
I know about React Context but I that's all, I don't know exactly how to use it in this case after watching some tutorials.
This is my /Dashboard route:
const DashboardButton = (classes) => (
<Route render={({ history }) => (
<Button
className={classes.button}
onClick={() => { history.push('/Dashboard') }}
>
Dashboard
</Button>
)} />
)
which is in the same AppBar component as the modal.
Thank you for your time.
You might want to add an App level context provider and have a variable there, possibly a boolean or a status that the data should update on Dashboard when you add data from AppBar modal. I made a quick demo, check it out.
https://codesandbox.io/s/blue-dew-8rfho?file=/src/App.js
I am trying to build a simple todo list. Basically there is a list of items. When the user clicks the 'edit' button on an item, selectedTodoItem is updated. Then a modal is shown which uses selectedTodoItem as prop.
I am also using ant.design library for the list.
Here is my code (with irrelevant bits left out):
const [selectedTodoItem, setSelectedTodoItem] = useState(selectedTodoList.items[0]);
const editItemHandler = (item) => {
setSelectedTodoItem(item);
dispatch(toggleEditTodoItemModalVisible());
}
return(
<List
className="whitebg listItems"
datasource={selectedTodoList.items}
renderItem={(item) => (
<TodoItemInList item={item} editHandler={editItemHandler} />
)}
/>
<TodoItemEditModal item={selectedTodoItem} />
);
<TodoItemInList> is basically a label and some buttons, one of which calls editHandler(item).
Here's a screenshot so you can get a better idea:
The problem is, when I load the page and click edit (blue, don't mind the delete icon) on an item, say 'Foundation', the edit modal loads fine. But when I click on another blue button, the modal still shows 'Foundation'. No matter what button I click, the modal only shows the first clicked item. It seems like selectedTodoItem is updating though, according to console.log(), but the modal's prop doesn't update with it.
Any nudge in the right direction would be much appreciated.
I am new to React.So i need to know how to hide or remove a component.
I have a Homepage where i have buttons like Logobutton and Menu button.I click on Menu button it loads a Menu component. I have done it by state. when i click on menu button I setState to true . It goes to Menu component. But when i click on Logo button It still shows the Menu component above the Home component. Logo button is from Header component.So i want to show Menu component only when clicking on menu button and hide or remove component when i move to some other page or click on any other button. How can i achieve it ?
You can conditionally render a component based on props:
<Component logged={value} />
//value will be the state value
if (logged) //state as prop {
return <UserGreeting />;
}
return <GuestGreeting />;
(from https://reactjs.org/docs/conditional-rendering.html)
or add style to a component and conditionally set the display property with ternary operator:
<Component logged={value} style={{display: logged ? 'block' : 'none'}}/>
I have an app using a material ui List with ListItems.
I want for users to be able to click on a ListItem and have it open a Modal or a Collapse to give more info about the ListItem. I want the view to stay the same (overall), albeit with a new url that links to that Modal or Collapse.
Right now, all I can get is that the user clicks on the ListItem and it opens an entirely new view.
I want to have the ListDetails or ListItem details be shown in a collapse or modal (or some ui that is on that same page) and be linkable (have a url)
Code:
// List
<List>
<Collapse>
<ListItem <Link to={`/listitem/${listitem.id}`}> />
<ListDetail />
</Collapse>
<ListItem />
<Modal><ListDetail /></Modal>
</List>
// Router
<Route path="/list/:id" render={({ match }) => <ListDetail params={match.params} />} />
This goes to an entirely new page. How to wire it up to so that I can show ListDetail within the same page?
How to set up the components/routing to change urls but just change the UI (and not render an entirely new page?
Do not put <Link to={'/listitem/${listitem.id}'}> there. Instead put an on-click handler with on-click function as this.props.router.push('/bar'). This will cause the route to change.
And when modal is false you can revert the url to previous url using the same method.