Develop Reference

MUI How to output text with Break Lines?

Every time I add content to the MUI Textfield it outputs it without any line breaks.
Is there a better solution to use?
<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
<TextField
name="Content" placeholder="Content" multiline={true}
value={content}
rows={18}
sx={{width: '100%'}}
onChange={(e) => setContent(e.target.value)}
/>
<div style={{maxWidth:"50%", paddingLeft:"10px"}} dangerouslySetInnerHTML={{__html: generateContent(content)}}></div>
</Stack>

Here's an example:
https://codesandbox.io/s/festive-dewdney-crxls
<Stack direction="row">
<TextField multiline value={state} onChange={handleChange} />
<Box sx={{ whiteSpace: "pre-wrap" }}>{state}</Box>
</Stack>
I used the whiteSpace: "pre-wrap" sx prop on the box where I am previewing the text, and I used the multiline prop on the textfield to make it a textarea input, and it worked.

I think the problem lies in your CSS and not in MUI. Use the white-space CSS property like this:
<div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: "pre-wrap"}}...
Read more about pre-wrap and the other values here
If this does not work then there are two similar questions but I doubt you will need them.
Best way to preserve new lines when I post data from a Multi Line Text Field
New line '\n' not recognized inside TextField in React

material-ui and navigation button with component

Following the example at https://material-ui.com/guides/composition/#button, i define in my main page a button:
<BrowserRouter>
<Box m={2}>
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
component={SubmitTime}>
Enter hours
</Button>
</Box>
</BrowserRouter>
Documentation states:
Routing libraries
The integration with third-party routing libraries is achieved with the component prop. The behavior is identical to the description of the prop above. Here are a few demos with react-router-dom. It covers the Button, Link, and List components, you should be able to apply the same strategy with all the components.
Now, based on the above, my understanding would be that the above would render a button that, when clicked, would get me to the SubmitTime component. Instead, I get the component itself rendered:
Being new to React and react-router-dom, i think i am doing something wrong, but can't understand what?? Any clue appreciated.
I tried adding 'to' to the component, like so, with same results:
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
component={SubmitTime} to="/timesheet">
Enter hours
</Button>

component is supposed to be the style of the button. Here you can see an example of using the button as a link: https://material-ui.com/components/buttons/#cursor-not-allowed. Also try reading the api: https://material-ui.com/api/button/#props
If you want your button to function as a link, add the href="/timesheet" attribute to it. Else push the route to the history:
const history = useHistory();
...
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
onClick={() => history.push("/timesheet")}
>
Enter hours
</Button>

Problem with Autocomplete from Material ui in ReactJS

I am trying to implement an autocomplete to show suggestions in an input field and save the selection in the state so I googled to look for an AutoComplete library and found one from MaterialUI but I can't seem to get it to work.
I get both an error and a warning and can't quite wrap my head around how to solve them.
here's my code
<div className="App">
<h1>Please Tell Diagnostica more medical info about you.</h1>
<Container className='Diagnosis'>
<Autocomplete
id="combo-box-demo"
options={this.state.uuidFeatures}
getOptionLabel={(feature) => feature.text}
value={this.state.inputValue}}
onChange={this.handleInputChange}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
</Container>
</div >

What is the better way to structure components' props?

I'm now testing some Material-UI components and can't understand 1 moment. For example, in List component. Why do they use syntax like this?
<List component="nav">
<ListItem
button
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
</List>
it seems to me that you can just use this approach:
<List component="nav"
items=[
{
icon: 'inbox',
text: 'Inbox',
onClick: () => handleListItemClick()
}
]
/>
Оr you can also use render props.
What makes their approach more convenient? after all, they clearly chose it for some reason

Although I'm not familiar with their style, the example seems simple to follow maybe for presentation purposes. For real use application usage you may want to do your array style example.

TouchableWithoutFeedback with custom component inside doesn't fires onPress callback

I made a DEMO
so the problem is that third button isn't working. The only difference between buttons is the way I passed them in Header component.
<Header secondButton={<View style={styles.button}><Text>Second Button</Text></View>}
thirdButton={<ThirdButton />}
onPress={this._handlePress} />

My solution was to turn this ...
<TouchableWithoutFeedback onPress={props.onPress}>
<Contents {...props} />
</TouchableWithoutFeedback>
into this...
<TouchableWithoutFeedback onPress={props.onPress}>
<View>
<Contents {...props} />
</View>
</TouchableWithoutFeedback>

answered by #brentvatne on github
I was able to fix it in this example - notice that I changed the
<View> in your ThirdButton to include {...this.props}
<View style={styles.button} {...this.props}>
.. etc
</View>
The reason for this is that TouchableWithoutFeedback will set responder
props on that component, but ThirdButton is just a composite component
with no backing UIView, so I want to pass those on to the View.
See what I'm talking about here