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}>
Related
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>
</> );
I need to return either Porover or Card depending on the condition with the same children content. This can be done by taking the children content into a separate component and returning it like this:
true ? <Popover><ChildrenContent props={props}/></Popover>
: <Card><ChildrenContent props = {props}/></Card>
But it seems to me that this is not the best solution in this case
<Popover dataCy="complexValidation">
<Section marginBottom={3}>
</Section>
<Flex flexDirection="column" gap={3}>
{validations.map((validation) => (
<Flex.Item key={validation.text}>
<Flex alignItems="center">
<Icon name="check_circle" size="large" color={validation.isSuccess ? 'positive' : 'negative'} />
<Flex.Item>
<Typography variant="bodyText2" component="span">
{validation.text}
</Typography>
</Flex.Item>
</Flex>
</Flex.Item>
))}
</Flex>
</Popover>
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 need some help. I use material-ui Grid system, and my full page is responsive like a charm, but i need at grid components overflowX with fixed header, so only the Grid container should be a horizontal scrollbar, but i tried a lot of things but nothing works.
I have this gird system. So i would like horizontal scrolling when im generated more grid item.
This is my code-snippet for this part.
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" direction={windowInnerWidth > 1280 ? 'horizontal' : 'vertical'} type="droppableItem">
{(provided, snapshot) => (
<div>
{windowInnerWidth > 1280 ? (
<Grid container spacing={6} ref={provided.innerRef} {...provided.droppableProps} >
{mergedData &&
mergedData.map((section, index) => (
<Grid item xs={12} xl="auto" lg="auto" key={section.uid} >
<Draggable
key={section.id}
draggableId={section.id}
index={index}
// isDragDisabled={false}
>
{(provided, snapshot) => (
<Card ref={provided.innerRef} {...provided.draggableProps} style={provided.draggableProps.style}>
<CardContent key={section.uid} index={props.index}>
<MyWorkoutSectionListItem
type={section.id} // type
key={section.id}
section={section}
provided={provided}
index={index}
workouts={section.workouts.filter((workout) => {
return workout.title.toLowerCase().includes(props.search.toLowerCase());
})} // subItems
workoutSections={props.workoutSections}
sectionName={props.sectionName}
defaultSectionId={defaultSectionId}
deleteSection={props.deleteSection}
handleWorkoutChange={props.handleWorkoutChange}
handleSectionChange={props.handleSectionChange}
changeMergeData={props.changeMergeData}
/>
{provided.placeholder}
</CardContent>
</Card>
)}
</Draggable>
</Grid>
))}
{provided.placeholder}
It would be great if somebody has idea for this problem.
You need to Use wrap={"nowrap"} prop on container Grid component and also need to provide the overflowX="auto".
Something like this
....
<Grid container spacing={2} wrap={"nowrap"} style={{ overflowX: "auto" }}>
<Grid item>Hello</Grid>
<Grid item>Hello</Grid>
</Grid>
...
I have created this Code sandbox project with the exact implementations
I am looking at react-admin demo code trying to learn from it. I have noticed quite a few time the same behavior: demo code is not waiting for a record to load and does not get undefined exceptions. I am struggling to understand why are they not getting the undefined exception. For example: In PosterEdit source code they are just using the component which looks like
const Poster = ({ record }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent className={classes.content}>
<img src={record.image} alt="" className={classes.img} />
</CardContent>
</Card>
);
};
If I use the component in the same way, I get undefined exception
TypeError: can't access property "image", record is undefined
I do not understand the magic from the demo code. Can someone demystify?
I found the answer for this exact example.
My Poster component was placed within several Grid components from material-u. Here is the cleaned code sample to show the structure.
<Edit {...props} aside={<Aside />}>
<TabbedForm }>
<FormTab >
<Grid container fullWidth className={classes.tabContent}>
<Grid item xs={7}>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" gutterBottom className={classes.sectionTitle}/>
<Poster
</Grid>
</Grid>
</Grid>
</Grid>
</FormTab >
..other form tabs..
</TabbedForm }>
</Edit>
If the component is placed directly as FormTab child, then it works. I still do not understand why though. Anyway, I hope it helps someone.