Currently, if I want to see all "goals", I have to click on "Expand" button.
Three "goals" fit in a row.
Not expanded
Expanded
What I have to do is remove "Expand" button and make sure that all "goals" are visible in a widget without that button.
What should be done there?
return (
<>
<Grid container spacing={1}>
{mapGoals(goals.slice(0, GOALS_TO_FIT_IN_ROW))}
</Grid>
{shouldCollapse && (
<>
<Collapse in={openCollapse}>
<Grid container spacing={1}>
{mapGoals(goals.slice(GOALS_TO_FIT_IN_ROW, goals.size))}
</Grid>
</Collapse>
<ExpandButton open={openCollapse} setOpen={setOpenCollapse} />
</>
)}
</> );
Thanks in advance.
the code should be
return (
<>
<Grid container spacing={1}>
{mapGoals(goals)}
</Grid>
</> );
Related
This error shows in my dev tools when I load my app. I'm not sure how to go about changing it to fix the problem. I suspect it is a reason why when I deploy it to heroku it looks different that when I view it locally so I'm hoping if I fix this it will fix my problem with heroku as well.
Here is my code:
return (
<Container className="container" maxWidth="xl">
<CssBaseline />
{/* <Box sx={{ marginTop: 10, padding: 7, bgcolor: "#eeeeee", borderRadius: "0.3rem" }}> */}
<Grid className="homeContainer" container spacing={1}>
<Grid className="topGrid">
<Grid className="imageContainer" item xs={4} sx={{ }}>
<img className="cctLogoLarge" src={cctlogo1} alt="outline of horse with parliament buildings in background"></img>
</Grid>
<Grid className="introContainer" item xs={12}>
<p>Welcome to Cap City Trotters! The CCT was created in 2019 by KMAC, Lynch, Bruster, and Damarts. Our Routes include several loops in both Ottawa and Gatineau.
We are always looking for new members so if you want to join you can take a look at some of our main routes and signup if you like what you see!</p>
{/* Test Connect to Strava */}
</Grid>
</Grid>
<Grid >
<Grid className="postList-grid">
{/* {loggedIn && (
<div className="col-12 mb-3">
<PostForm />
</div>
)} */}
<Grid item xs={6} sx={{ bgcolor: ""}} className="recentPosts">
{loading ? (
<div>Loading...</div>
) : (
<PostList posts={posts}/>
)}
</Grid>
{loggedIn && userData ? (
<Grid>
{/* <FriendList
username={userData.me.username}
friendCount={userData.me.friendCount}
friends={userData.me.friends}
/> */}
</Grid>
) : null}
</Grid>
</Grid>
{/* </Box> */}
</Grid>
</Container>
)
I've looked at similar questions and answers but can't figure out how to solve this problem specifically.
Thanks in advance!
Whenever you add a prop without a value to React component, it evaluates to true:
<MyComponent boo />
Here, MyComponent receives a boo = true property. That's what you have in your code with item, while it shouldn't be a boolean value. Just pass some value to item:
<Grid item={somethingElse}>
So i'm trying basically to have a input field which completes a link and refers the user to it.
However when I click on the button I get a page to open properly but with a 'undefined' at the end as if the input field was not updated.
Any insight would be appreciated :)
let workerID;
const workerLink = "html link";
const workerSearch = workerLink + workerID
return (
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<h1><DashboardOutlinedIcon /> Job Card</h1>
<Moment className={classes.time}interval={1000} format="HH:mm:ss DD/MM/YYYY" />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<h3><AccessibilityNewRoundedIcon /> NameGet</h3>
<TextField id="standard-basic" label="Name:" variant="outlined" />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<h3>Fetch</h3>
<TextField id="standard-basic" label="ID:" variant="outlined" value={workerID}/>
<Button variant="contained" color="primary" className={classes.formstyle} value={workerID}>Search</Button><SearchRoundedIcon />
</Paper>
</Grid>
</Grid>
</div>
);
You should add a onChange attribute to the input(TextField in MaterialUI) and you are better using state in React instead of variables because if the variable updates again react will not update the UI with respect to the value of variable but it will update in case of state.
import React, {useState} from 'react'
// Your Rest of code
const [workerID, setWorkerID] = useState('')//initial value of workerID is empty string
return(
//Rest of Code
<TextField id="standard-basic" label="ID:" variant="outlined" value={workerID} onChange={event=>setWorkerID(event.target.value)}/>
//Rest of Code
)
I am trying to set the value of TextField when a user clicks on a button.
The error I am getting is:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
I think it has to do with the Button as I have a onclick function for each one. maybe there a better solution?
const [txtValue, setTxtValue] = useState({})
function campaignAmount(value){
// alert(value)
setTxtValue(value);
}
return (
<Grid container>
<Grid item lg={6}>
<ButtonGroup color="primary" aria-label="outlined primary button group">
<Button onclick={campaignAmount(300)}>$300</Button>
<Button onclick={campaignAmount(500)}>$500</Button>
<Button onclick={campaignAmount(1000)}>$1000</Button>
</ButtonGroup>
</Grid>
<Grid item lg={3}>
<TextField
id="campaignAmount"
name="campaignAmount"
margin="none"
fullWidth
value={`${txtValue[0]}`=== "undefined" ? '0' : `${txtValue[0]}`}
variant="outlined"
required={true}
/>
</Grid>
</Grid>
);
Update:
I have made some changes and now I am getting
Line 164:9: 'setTextValue' is not defined no-undef
Search for the keywords to learn more about each error.
New Code
const [txtValue, setTxtValue] = useState("0")
function schemaTypeSelectionHandle(event) {
// console.log('key: ', $(event.target).data('key'));
setTextValue(event.target.attributes.getNamedItem('data-key').value);
console.log('key: ', event.target.attributes.getNamedItem('data-key').value);
}
return (
<Grid container>
<Grid item lg={6}>
<ButtonGroup color="primary" onClick={this.schemaTypeSelectionHandle.bind(this)} aria-label="outlined primary button group">
<Button data-key='1'>$300</Button>
<Button data-key='1'>$500</Button>
<Button data-key='1'>>$1000</Button>
</ButtonGroup>
</Grid>
<Grid item lg={3}>
<TextField
id="campaignAmount"
name="campaignAmount"
margin="none"
fullWidth
value={`${txtValue[0]}`=== "undefined" ? '0' : `${txtValue[0]}`}
variant="outlined"
required={true}
/>
</Grid>
</Grid>
);
The edited code seems to be working fine. But the only issue is the little typo you have. It is "setTxtValue" not "setTextValue".
Your defined hook => const [txtValue, setTxtValue] = useState("0")
Hi!
I go on toy project with React, Material-ui.
when snack bar or react-toastify pop up.
It's not harboring in screen. (RED: scroll up/down then snackbar is there)
I changed pop up position top/bottom. but, It can't cover every case.
How can it make pop up in screen. (GREEN is showing in screen)
I want to SnackBar pop up in "BLUE" position and harboring with scroll.
thanks
<Grid item>
<Grid container direction="row" justify="space-evenly">
<Grid item>
<Button variant="outlined" onClick={() => {
toast.success("Update!")
}}>Update!</Button>
</Grid>
</Grid>
</Grid>
<ToastContainer position="top-center" autoClose={2500} />
I solved it..
I move <ToastContainer/> to top component from sub-component
(from 'Content' to 'Header')
export const App = observer(() => {
const classes = kpopStyle();
return (
<React.Fragment>
<BrowserRouter>
<Header /> // <-- to Here
{storeUiHandler.checkMobile() ?
<div className={classes.contentLayoutMobile}>
<Content /> // <-- from Here
<Footer />
</div> :
<div className={classes.contentLayoutPC}>
<Content />
<Footer />
</div>}
</BrowserRouter>
</React.Fragment>
);
});
now, It works as I expected.
I'm trying to only have one column in a grid. But the prop columns={1} is not working. And the columns are not taking the whole width of the window.
This is the code where I return the component.
return (
<Grid columns={1} textAlign='center' container divided='vertically'>
<Grid.Column width={6}>
<Search fluid size='huge'
loading = {isLoading}
onResultSelect = {this.handleResultSelect}
onSearchChange = {this.handleSearchChange}
results = {results}
value = {value} />
{this.state.rides}
</Grid.Column>
<Grid.Column width={10}>
<Image src={faker.image.avatar()} style={{ backgroundSize: 'cover' }} />
</Grid.Column>
</Grid>
);
Image of how it looks at present.
In fact, it's wrong usage of props, columns and width can't be combined. Take a look on this issue on Github, it contains more info about Grid. Also, you can check official docs of SUI.
This is because of the width prop you have on your Grid.Column sub-components. The width for each child column should add up to the total number of columns you have specified.
You could add multiple Grid.Column components to the following layout and they will all appear in a single column:
<Grid
columns={1}
textAlign="center"
container
divided="vertically"
>
<Grid.Column>
...
</Grid.Column>
<Grid.Column>
...
</Grid.Column>
</Grid>
What is the result you are trying to achieve?
I set up an example to play around with at the following URL: https://codesandbox.io/s/pyvqv1k01m