We Keep Coding

Cannot Link to part of page with MUI 5 Drawer

I'm simply trying to link to a specific part of my first page when the user clicks on the Shop button in the navigation Drawer but it doesn't do anything at all:
This is the code for the MUI 5 Drawer component:
<Drawer
anchor="left"
open={open}
onClose={() => setOpen(false)}
PaperProps={{
sx: {
background: "linear-gradient(to top, #9C685B44, #9C685Bff)",
},
}}
>
<IconButton onClick={() => setOpen(false)}>
<ChevronLeftIcon sx={{ color: "white" }} />
</IconButton>
<Divider />
<List>
/////////////////////////////////
<ListItem>
<Button
// Linking to Products Section
href="#products"
startIcon={<PhoneAndroidIcon />}
sx={{
color: "white",
fontFamily: "Montserrat",
}}
>
Shop
</Button>
</ListItem>
//////////////////////////////
<ListItem>
<Badge color="error" badgeContent={badgeNumber}>
<Button
startIcon={<ShoppingCartIcon />}
sx={{
color: "white",
fontFamily: "Montserrat",
}}
>
Cart
</Button>
</Badge>
</ListItem>
</List>
</Drawer>
And in that respective section, I have added an id with the value of products to the container:
<Container maxWidth="xl" id="products">
...
</Container>
Even using the anchor tag results in the same issue.
Is there anyway to fix this?

You can use scrollIntoView and History.pushState() to handle this. Remove the href from your Button component, and instead use its onClick method to call the following:
// id is your section names (e.g. 'products')
// url is optional, and if not specified, is set to the document's current URL
const onNavClick = (event, id, url) =>
{
let element = document.getElementById(id)
event.preventDefault()
element.scrollIntoView()
window.history.pushState(id, id, url)
}
There are various other options you can pass into scrollIntoView, and you can find out more about the available options by following the link above.

Scroll into a certain div that is hidden in the beggining

Im building a web chat app in next.js and i have a emoji picker button that when its clicked the menu of emojis appear.The thing is that in order to the user sees the menu of the emojis he has to scroll down.I have tried scrollIntoView() but it doesnt seem to work,possibly im doing something wrong.
<EmoticonContainer >
{showEmojis && (<Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)}
</EmoticonContainer>
<InputContainer id="container" >
<IconButton onClick={() => {setShowEmojis(!showEmojis),()=>document.getElementById('picker').scrollIntoView(true)}}>
<EmojiEmotionsIcon style={{ color: 'purple' }} fontSize='inherit' />
</IconButton>
<Input style={{fontFamily:"Roboto",fontSize:"12px"}} onKeyUp={()=>ChangeSendIcon()} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={input} onChange={e=> setInput(e.target.value)}/>
<div>
<IconButton id="send" onClick={sendMessage} style={{ color: 'purple',display:'none' }} disabled={!input} type="submit">
<SendIcon></SendIcon>
</IconButton>
<IconButton style={{ color: 'purple'}} id="record" onMouseUp={()=>record()}>
<MicIcon ></MicIcon>
</IconButton>
<IconButton style={{ color: 'purple',display:"none" }} onClick={()=>stop()} id="stop" >
<StopIcon></StopIcon>
</IconButton>
</div>
</InputContainer>
I have tried this but it doesnt seem to work:
useEffect(() => {
if(showEmojis) {
document.getElementById('picker').scrollIntoView(true)
}
} , [showEmojis])

Instead of document.getElementById('picker').scrollIntoView(true) use the React.useRef() hook.
E.g. at the start of your function
const pickerRef = useRef()
then in your useEffect hook
useEffect(() => {
if(showEmojis) {
pickerRef.current.scrollIntoView(true)
}
} , [showEmojis])
then in your return body
<Picker ref={pickerRef} id="picker" style={{width: '100%'}} onSelect={addEmoji}/>
It's not advised to use javascript query in jsx.

I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even

Now i have used state hook to hide the Form when the page loads. And upon the click or toggle of the radio I'm able to show the Form, But if i toggle the radio again, the form is not hiding.
This is what i have implemented:
const WelcomeTab = () => {
const [toggle, settoggle] = useState(false);
return (
<React.Fragment>
<Tab.Pane
style={{
borderRadius: '7px',
padding: '30px',
}}
attached={false}
>
<Grid>
<Grid.Row>
<Grid.Column floated="left" width={8}>
<Header
style={{
fontSize: '18px',
fontFamily: 'Nunito-Regular',
color: '#4F4F4F',
}}
>
Welcome Screen
</Header>
</Grid.Column>
<Grid.Column floated="right" width={4}>
<Header
as="h4"
style={{
display: 'flex',
justifyContent: 'space-around',
marginLeft: '30px',
}}
>
Customize
<Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
</Header>
</Grid.Column>
</Grid.Row>
</Grid>
{toggle ? (
<Form style={{ paddingTop: '20px' }}>
<Form.Field>
<label style={lableStyle}>Title</label>
<input style={{ marginBottom: '20px' }} />
<label style={lableStyle}>Message</label>
<TextArea />
</Form.Field>
</Form>
) : null}
</Tab.Pane>
</React.Fragment>
);
};
const lableStyle = {
fontFamily: 'Nunito-Regular',
fontWeight: 400,
color: '#4F4F4F',
fontSize: '15px',
display: 'inline-block',
marginBottom: '10px',
};
export default WelcomeTab;

try to add useEffect hook along with change like below,
you no longer need to {} this is old syntax of setState, using hooks we directly make the changes, hope this helps
useEffect(()=>{},[toggle])
replace this wrong syntax code, i can see its not json its boolean value
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>
as this is old syntax not work with hooks, try to implment this instead,
<Radio toggle onChange={()=>settoggle(!toggle)}/>

Add a button to react material-table toolbar

I want to add a button to material-table toolbar. it doesnt do anything relevant to the table. it just opens a modal with some information
I want to add a button called "quotations" to the left side of the "add item" button.
Sandbox code: https://codesandbox.io/embed/charming-yalow-4pnk4?fontsize=14&hidenavigation=1&theme=dark

As Will Evers mentioned, it's possible to add whatever is necessary to Toolbar of the MaterialTable component by using Toolbar prop :
Toolbar: (props) => (
<div
style={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center"
}}
>
<Button
style={{ height: "fit-content" }}
color="primary"
variant="contained"
>
Quotations
</Button>
<div style={{ width: "13rem" }}>
<MTableToolbar {...props} />
</div>
</div>
),
Working Demo

Per the docs, it looks like you need to override the Toolbar component of your table and you should be able to add what ever you want above the column headers:
https://material-table.com/#/docs/features/component-overriding
https://i.stack.imgur.com/J0mqf.png

Use this prop in the component tag
renderTopToolbarCustomActions={() => (
<Button
variant="contained"
color="primary"
size="large"
onClick={() => console.log('something')}
>
Quotations
</Button>
)}

Elements getting overlapped in select drop down material ui

I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?

Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.