My goal is to create a page for a specific user homepage with buttons to direct them to their accessible pages. I am in the testing phase right now and I want to use alerts to see if the button will react to being clicked on. However, as being new to React, I am having trouble have multiple buttons return an alert message in my browser. This is what I have so far.
// Here will be the mentor page with a decent layout and buttons to future pages.
import React from 'react';
import '../Mentor/Button.css'
import { useNavigate } from "react-router-dom";
function Mentor() {
function sayHello() {
alert('Hello');
}
function createQuiz(){
alert('You clicked me to create a quiz!');
}
return (
<div>
<button onClick={sayHello}>
Click me!
</button>
<button onCLick={createQuiz}>
Create Quiz
</button>
</div>
);
}
export default Mentor;
For not to get any errors, I added but it will only give me a message from sayHello and not from createQuiz. And the navigate import is something I am planning on using later when problem is fixed.
Assuming you copy pasted your code here, it looks like you simply misspelled the second onClick ! You wrote onCLick instead of onClick.
I need to create a set of card components that should get added up to bottom right of the screen. This card should be created on click of as button and clicking on some other button should add the card next to each other. I am having trouble creating this card component that should stick to the bottom right of the screen.
This is similar to linkedin website chat, that gets shown at the bottom right, and opening a chat will add that to the previously opened card
Can someone help as to how to get started or a simple example of how to add two cards to the bottom right of the screen on clcik of two different buttons?
Link to the sandbox : https://codesandbox.io/s/react-hook-form-with-material-ui-forked-c9o8ck
Code
// App.jsx
import React from "react";
import { Button } from "#material-ui/core";
import { Panel } from "./Panel";
export const App = () => {
return (
<>
<Button>Button1</Button>
<Button>Button2</Button>
<Panel />
</>
);
};
// Panel.jsx
import React from "react";
export const Panel = () => {
return <div> Panel Content</div>;
};
I want to press a button and the page scrolls down automatically to the next piece of content. I know in HTML I'd use sections but for React I am still learning on how to create this function.
import Button from '#material-ui/core/Button';
function scrollDownPage(){
window.scrollTo(PageContent) <<<< I SCROLL THE PAGE DOWN TO PAGE CONTENT COMPONENT
}
function App() {
const style = useStyles();
return(
<Button
onClick={scrollDownPage} // <<<<<<<<<THIS
>
</Button>
<PageContent/>
)}
I have a page with a toolbar and a sidebar. The sidebar is only visible when a user is logged in.
The sidebar Navigation Drawer is default not visible if the user is on a mobile device.
Now i want a button in the toolbar that the user can open the sidebar.
But the toolbar and the sidebar are two different components.
Therefore i'm using Vuex to manage the state. But the state is computet and has no setter, so i can't use the state direct in the navigaion controllers v-model.
Now i read that you can define a get and a set method on computed variables.
But is this the best way to do this?
in your template:
<template>
<v-navigation-drawer
:value="isHomeNavigationDrawerOpen"
#input="TOGGLE_HOME_NAVIGATION_DRAWER"
...>
</v-navigation-drawer>
</template>
<scripts>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState('userData', ['user', 'loggedIn']),
...mapState('toolbar', ['isHomeNavigationDrawerOpen']),
},
methods:{
...mapActions('toolbar', ['TOGGLE_HOME_NAVIGATION_DRAWER']),
}
...
In your store module toolbar.js (or your module name)
export default {
state: {
isHomeNavigationDrawerOpen: null,
},
actions: {
TOGGLE_HOME_NAVIGATION_DRAWER(context, open) {
context.commit('TOGGLE_HOME_NAVIGATION_DRAWER', open)
},
},
mutations: {
TOGGLE_HOME_NAVIGATION_DRAWER: (state, open) => {
state.isHomeNavigationDrawerOpen = open
},
},
}
In Vuetify, the component v-navigation-drawer emit a event called 'input' used by v-model.
This event is emitted when the navigation drawer is displayed and when it is closed. If we call the 'toggle' function in both cases we will enter an infinite loop.
I have the same problem and it is what is happening to me.
The way vuex want you to do is to use the proper state mutation.
#click="$store.commit('open-sidebar')"
And the computed value will react to the mutation.
On your toolbar component, this is where you want your button; Define a drawer boolean property. The html with the button in the toolbar component would look something like this:
<v-toolbar color="primary" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
<v-toolbar-side-icon #click.stop="$emit('update:drawer', !drawer)"></v-toolbar-side-icon>
In the toolbar component parent you would also want to declare an drawer variable. Then the html would look something like this:
<toolbar :drawer.sync="drawer"></toolbar>
<v-navigation-drawer class="secondary" dark fixed :clipped="$vuetify.breakpoint.mdAndUp" app v-model="drawer">
toolbar is your toolbar component which I mentioned earlier.
You will note that the navigation drawer is now listening to the drawer property.
Please let me know if this answer is not suffice, I will create an example for you
I can successfully go from the Home component to TacoTypes component with routing. But what I'm struggling with is going from TacoTypes component to Home component with routing using the browser back button.
/ChooseTruck is the path name I gave in an attempt to navigate back to it from TacoTypes component.
I've read up on the documentation and tried following it but it just won't work. How can I make this happen?
import React, { Component } from 'react';
import { Link, Route } from 'react-router-dom';
import Home from '../../components/Home/Home';
import Aux from '../../hoc/Aux';
class TacoTypes extends Component {
render() {
return (
<Aux>
<Link to={{pathname: '/ChooseTruck'}} />
<Route path="/" exact component={Home} />
</Aux>
);
}
}
export default TacoTypes;
First of all, you can use Fragment component instead of making Aux. Concept is easy and it's actually does the same as Aux, but it's built in and you can use it rightaway. Read more here
Now let's get to your question. Why your path is /ChooseTruck? I don't really understand this. When you want to navigate back to home using Link component just make path / as It is below in the Route component. Additionally when you want to use just back browser button use it.
react-router-dom is making stack of the paths, so when you navigate to the TacoTypes component and want back to previous URL just hit back browser button, or use withRouter hoc and there you got goBack() method which is also navigating to the previous URL.