I ma working on a React project, I am trying to define an a state to a button. But state is not applying to a button can you please correct me
This is my code
This is App.js
import React, { useState } from "react";
import { Button } from "antd"
import 'antd/dist/antd.css';
import "./App.css";
const App = () => {
const [buttonOne, setButtonOne] = useState("red")
const [buttonTwo, setButtonTwo] = useState({
backgroundColor: "red",
color: "black",
border: "red"
})
return (
<div>
<Button style={{backgroundColor: buttonOne, border: buttonOne}} className="one" type="primary">First</Button>
<Button style={{backgroundColor: buttonTwo, color: buttonTwo, border: buttonTwo}} className="two" type="primary">Second</Button>
</div>
)
}
export default App
````
Try this
<div>
<Button style={{backgroundColor: buttonOne, border: buttonOne}} className="one" type="primary">First</Button>
<Button style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo.color, border: buttonTwo.border}} className="two" type="primary">Second</Button>
</div>
Since your state is object, you need to go inner fields like -
buttonTwo.border or buttonTwo['color']
Example
<Button style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo['color'], border: buttonTwo.border}} className="two" type="primary">Second</Button>
For the second button you would need to access the object's properties.
backgroundColor: buttonTwo.backgroundColor
color: buttonTwo.color
border: buttonTwo.border
Related
I am new to React and material UI. I am using material UI button and I want to remove default button classes (MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-buttonCss-3). I want to use only my class 'buttonCss'. Please can anyone help me to fix this.
My code is below -:
import { TextField } from '#material-ui/core';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles'
import { Form, Formik } from 'formik';
import * as React from 'react';`enter code here`
const useStyles = makeStyles((theme) => ({
container: {`enter code here`
maxWidth: "100vw",
maxHeight: "100vh",
display: "flex",
alignItems: "flex-start",
justifyContent: "space-evenly",
flexWrap: 'wrap'
},
mybox: {
width: 300,
backgroundColor: theme.palette.success.main,
color: "white",
padding: theme.spacing(1),
borderRadius: 4,
boxShadow: theme.shadows[10]
},
buttonCss : {
backgroundColor: theme.palette.success.dark
},
deafult: {
color: 'red'
}
}));
// implementing button this way
<Button className={classes.buttonCss} >Submit</Button>
You can't remove the default class and then continue using MaterialUi, now just use the default html button .
If you want only to customise, now just use
const useStyles = makeStyles({
root: {background: "red}
});
export default () => {
const classes = useStyles();
return <Button className={classes} >Submit</Button>
}
I am stuck in a scenario and scenario is that I have a table of product and I want to show menu of sub product's whenever I hover on a particular row-but not able to do it-Anyone please help-
You can create a state variable with useState and use it to show the menu in sub-product.
For example,
import React, { useState } from "react";
export default function ShowLabelHover() {
const [visibleMenu, setVisibleMenu] = useState({ display: "none" });
const style = {
border: "1px solid gray",
width: 200,
height: 50,
padding: 10,
margin: 100
};
return (
<div className="App">
<div
style={style}
onMouseEnter={(e) => {
setVisibleMenu({ display: "block" });
}}
onMouseLeave={(e) => {
setVisibleMenu({ display: "none" });
}}
>
<label style={visibleMenu}>Here is some text!</label>
</div>
</div>
);
}
I am working on a React project, In my project I have two buttons, for First button I assigned a state for second button I written a function and I assigned a state as well. but my onClick function is not working. please help me to resolve this isssue.
This is App.js
import React, { useState } from "react";
import { Button } from "antd"
import 'antd/dist/antd.css';
import "./App.css";
const App = () => {
const [buttonOne, setButtonOne] = useState("red")
const [buttonTwo, setButtonTwo] = useState("blue")
const buttonTwoBackgroundColor = () => {
setButtonTwo({
backgroundColor: "red",
border: "red"
})
}
return (
<div>
<Button style={{backgroundColor: buttonOne, border: buttonOne}} className="one" type="primary">First</Button>
<Button style={{backgroundColor: buttonTwo, border: buttonTwo}} onClick={buttonTwoBackgroundColor} className="two" type="primary">Second</Button>
</div>
)
}
export default App
This is App.css
.one {
margin-right: 5px;
margin-left: 250px;
margin-top: 50px;
}
.two, .three, .four, .five {
margin-right: 5px;
}
In the function buttonTwoBackgroundColor you set setButtonTwo to a object. it should be a string.
const buttonTwoBackgroundColor = () => {
setButtonTwo("red")
}
change
onClick={buttonTwoBackgroundColor}
to
onClick={setButtonTwo("red")}
you are using useState as string at initialization and assigning an object in function below, which is not proper way!
You are trying to set state to be an object when you have defined the defualt state as a string.
Update the default state to an object and then access properties like this:
import React, { useState } from "react";
import { Button } from "antd";
import "./styles.css";
export default function App() {
const [buttonOne, setButtonOne] = useState("red");
const [buttonTwo, setButtonTwo] = useState({backgroundColor: "blue", border: "blue"});
const buttonTwoBackgroundColor = () => {
setButtonTwo(prevState => ({
...prevState,
backgroundColor: 'blue',
border: 'red'
}));
};
return (
<div>
<Button
style={{ backgroundColor: buttonOne, border: buttonOne }}
className="one"
type="primary"
>
First
</Button>
<Button
style={{ backgroundColor: buttonTwo.backgroundColor, border: buttonTwo.border }}
onClick={buttonTwoBackgroundColor}
className="two"
type="primary"
>
Second
</Button>
</div>
);
}
So I have an "Add" button that, once clicked, I want to open another button in which the user can add some text. The reason the second (newly opened) button is a button is because it will serve as a link to another page. If anyone cares to know, I'm trying to build an app where people can track certain exercises/movements. This first page will be where they write in the names of the movements they want to track.
Here is the code I have for the "Add" button:
import React from 'react';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import AddCircleIcon from '#material-ui/icons/AddCircle';
const useStyles = makeStyles((theme) => ({
button: {
margin: theme.spacing(1),
background: '#C4C4C4',
fontFamily: 'PT Sans Caption',
fontSize: '18px',
borderRadius: '10px',
padding: '20px',
marginTop: '50px',
width: '700px'
},
}));
export default function AddMovementButton() {
const classes = useStyles();
return (
<div>
<Button
variant="contained"
className={classes.button}
startIcon={<AddCircleIcon />}>
Add Movement
</Button>
</div>
);
};
Here is the code for the button that I would like to appear after the "Add" is clicked:
import React from 'react';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
button: {
margin: theme.spacing(1),
background: '#C4C4C4',
fontFamily: 'PT Sans Caption',
fontSize: '18px',
borderRadius: '10px',
padding: '20px',
marginTop: '50px',
width: '700px',
},
newMovement: {
border: 'none',
padding: '10px',
fontFamily: 'PT Sans Caption',
fontSize: '18px',
borderRadius: '10px',
}
}));
export default function MovementButton(props) {
const classes = useStyles();
//const [ exercise ] = useState(props.exercise)
return (
<Button
variant="contained"
className={classes.button}>
<input type="text" placeholder="Enter Movement Here" className={classes.newMovement}/>
</Button>
);
};
Here is a picture of what I have on my browser. The two buttons that say "Enter Movement Here" are there because I called them in the home page. The goal would be for the homepage to start with just the "Add Movement" button and then grow as the user adds movements.
If I left out any needed info just let me know, and also I'm fairly new to coding so any other tips/corrections would be appreciated. Thanks guys!
You can create a state to count the button click, use the for loop to generate the buttons.
import React, {useState} from 'react';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import AddCircleIcon from '#material-ui/icons/AddCircle';
const useStyles = makeStyles((theme) => ({
button: {
margin: theme.spacing(1),
background: '#C4C4C4',
fontFamily: 'PT Sans Caption',
fontSize: '18px',
borderRadius: '10px',
padding: '20px',
marginTop: '50px',
width: '700px'
},
}));
export default function AddMovementButton() {
const classes = useStyles();
const [count, setCount] = useState(0);
const generateButton s= () => {
let buttons = [];
for(let i = 0; i < count; i++) {
buttons.push(<MovementButton />);
}
return buttons;
}
return (
<div>
{generateButtons()}
<Button
variant="contained"
className={classes.button}
onClick={() => setCount(count => count + 1)}
startIcon={<AddCircleIcon />}>
Add Movement
</Button>
</div>
);
};
I need to create a React component that is a Horizontal Divider with a content like text In between. All the resources I have online is unable to help me get this done. I tried a material-ui divider by creating a Divider component and placing my text in-between like the example below:
<Divider>Or</Divider>
But I get the error:
hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
I need to achieve this in the image below:
Any help will be appreciated.
These are my codes below:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import List from '#material-ui/core/List';
import Divider from '#material-ui/core/Divider';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
export default function ListDividers() {
const classes = useStyles();
return (
<List component="nav" className={classes.root} aria-label="mailbox
folders">
<Divider>Or</Divider>
</List>
);
}
Using Material UI.
import React from "react";
import { makeStyles } from "#material-ui/core";
const useStyles = makeStyles(theme => ({
container: {
display: "flex",
alignItems: "center"
},
border: {
borderBottom: "2px solid lightgray",
width: "100%"
},
content: {
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
paddingRight: theme.spacing(2),
paddingLeft: theme.spacing(2),
fontWeight: 500,
fontSize: 22,
color: "lightgray"
}
}));
const DividerWithText = ({ children }) => {
const classes = useStyles();
return (
<div className={classes.container}>
<div className={classes.border} />
<span className={classes.content}>{children}</span>
<div className={classes.border} />
</div>
);
};
export default DividerWithText;
You can import and use it like the below
<DividerWithText>Or</DividerWithText>
Result
Here a custom example of what you could do : repro on stackblitz
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
const App = () => {
return <Divider>Or</Divider>;
};
const Divider = ({ children }) => {
return (
<div className="container">
<div className="border" />
<span className="content">
{children}
</span>
<div className="border" />
</div>
);
};
render(<App />, document.getElementById("root"));
And the CSS:
.container{
display: flex;
align-items: center;
}
.border{
border-bottom: 1px solid black;
width: 100%;
}
.content {
padding: 0 10px 0 10px;
}
Update 29/03/2022
That's now possible with Material UI 🔥
https://mui.com/components/dividers/#dividers-with-text
You may want different spacing sometime
<Divider spacing={1}>Hello World</Divider>
Or
<Divider spacing={2}>Hello World</Divider>
For a configurable spacing here a Github Gist
Or a playground in codesandbox if you prefer
The current answer causes any text with spaces in-between to wrap:
If that happens, changing width: 100% to flexGrow: 1 should solve it:
border: {
borderBottom: "2px solid lightgray",
flexGrow: 1,
}
Unfortunately for now, having Divider with text on it in MUI is only available in v5, which is still in alpha stage. If you would like to try, you can download the alpha package, but be warned that it is still highly unstable and a lot of changes might be needed to migrate to v5, which is not very worth it.
GitHub discussion: https://github.com/mui-org/material-ui/issues/24036