i am trying to create a Dynamic Material UI Flex box that generate a new row based on backend . my idea is to close the current outer Box and create a new one based on a flag
so i write the following code
<Box p="1em">
<Box display="flex">
{tabs.map((t, index) => {
return (
<>
<Box flex={resourcesTabs[index][0] == null ? 1 : resourcesTabs[index][0]['width_class']} ml="1em">
<Typography variant="h6" gutterBottom>{t}</Typography>
{resourcesFields[index] && resourcesFields[index].map((f, index) =>
generateInputField(f, index)
)}
</Box>
{resourcesTabs[index][0]['new_line_after'] && </Box><Box display="flex">}
</>
);
})}
</Box>
</Box>
But i recive the following Error
Parsing error: Unexpected token
as it complain about close open tags dynamic for this line
{resourcesTabs[index][0]['new_line_after'] && (</Box><Box display="flex">}
any idea how to solve this ?
There is a sneaky parenthesis:
{resourcesTabs[index][0]['new_line_after'] && => ( <= </Box><Box display="flex">}
i fixed it by replace box with grid as the following code
<div style={{ padding: 10 }}>
<Grid container spacing={3}>
{tabs.map((t, index) => {
return (
<>
<Grid item xs={resourcesTabs[index][0] == null ? 6 : resourcesTabs[index][0]['width_class']} >
<Typography variant="h6" gutterBottom>{t}</Typography>
{resourcesFields[index] && resourcesFields[index].map((f, index) =>
generateInputField(f, index)
)}
</Grid>
</>
);
}
)}
</Grid>
</div>
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}>
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>
I'm developing an app using React, which uses the Potree viewer (https://github.com/potree/potree) to display large points cloud files; within the viewer I'm trying to display the real-time camera coordinates (X, Y, Z) to the user, as well as will use them to optimise the cloud rendering.
I have been able to source where the coordinates are, by getting the active camera (viewer.scene.getActiveCamera()) and finding the coordinates in viewer.scene.cameraP.position.x/y/z.
Though these values seem static, and I'm saying this because I have tried to update my React component using a useEffect() hook, based on the changing of any of the coordinates, which doesn't work.
Is there anyone who encountered the same issue before and could help me out in finding/sourcing the camera coordinates real-time values, or assist me in actually using the values I have already found and make them updating real time in React?
function Coordinates({ viewer, drawerOpen }) {
const myActiveCamera = viewer.scene.getActiveCamera();
const [cameraCoords, setCameraCoords] = useState(null);
useEffect(() => {
console.log("hello");
if (viewer !== null && viewer.scene !== null) {
setCameraCoords(myActiveCamera.position);
}
}, [myActiveCamera.position.x, myActiveCamera.position.y, myActiveCamera.position.z]);
console.log(viewer);
console.log(myActiveCamera);
console.log(cameraCoords);
return (
<Container maxWidth={false} style={{ marginLeft: drawerOpen && '210px' }}>
<Contents container alignItems="center">
<CameraAlt /> {/*Camera Icon*/}
<Divider orientation="vertical" flexItem />
{viewer ? (
<Typography variant="p">
X: {cameraCoords.x.toFixed(8)}
</Typography>
) : (
<Typography variant="p">X: 0.0</Typography>
)}
<Divider orientation="vertical" flexItem />
{viewer ? (
<Typography variant="p">
Y: {cameraCoords.y.toFixed(8)}
</Typography>
) : (
<Typography variant="p">Y: 0.0</Typography>
)}
<Divider orientation="vertical" flexItem />
{viewer ? (
<Typography variant="p">
Z: {cameraCoords.z.toFixed(8)}
</Typography>
) : (
<Typography variant="p">Z: 0.0</Typography>
)}
</Contents>
</Container>
);
}
After a few hours spent investigating and trying, I have come up with a solution.
The principle behind it is the same as a digital clock.
Here's the code:
function Coordinates({ viewer, drawerOpen }) {
//Declaring the state for the cameraposition coordinates and setting their default to 0
const [activeCameraCoordinates, setActiveCameraCoordinates] = useState({ x: 0, y: 0, z: 0 });
//The useEffect and the timer, work together to achieve a real time value update displayed to the user
useEffect(() => {
setInterval(() => {
if (viewer !== 'undefined' && viewer !== undefined && viewer !== null) {
let cameraPosition = viewer.scene.getActiveCamera().position;
setActiveCameraCoordinates(cameraPosition);
}
}, 100)
})
return (
<Container maxWidth={false} style={{ marginLeft: drawerOpen && '210px' }}>
<Contents container alignItems="center">
<CameraAlt />
<Divider orientation="vertical" flexItem />
<Typography variant="p">X:
{activeCameraCoordinates.x.toFixed(2)}
</Typography>
<Divider orientation="vertical" flexItem />
<Typography variant="p">Y:
{activeCameraCoordinates.y.toFixed(2)}
</Typography>
<Divider orientation="vertical" flexItem />
<Typography variant="p">Z:
{activeCameraCoordinates.z.toFixed(2)}
</Typography>
</Contents>
</Container >
);
}
I've added some piece of code in render method of react using conditional (ternary) operator. The thing is the condition is rendered true also the control goes into the block. But when I print the value the variable is undefined
I tried inserting an alert inside the block to check if the control traverses the block and it worked.
const comments =
details.comments_count >= 1
? Object.keys(details.comments_list).forEach(keys => {
return (
<ListItem
alignItems="flex-start"
key={details.comments_list[keys].aid}
>
<ListItemAvatar>
<Avatar>{details.comments_list[keys].aname.charAt(0)}</Avatar>
</ListItemAvatar>
<Card style={useStyles.card}>
<CardContent>
<ListItemText
primary={details.comments_list[keys].aname}
secondary={details.comments_list[keys].content}
/>
</CardContent>
</Card>
</ListItem>
);
})
: null;
console.log(comments);
//=>undefined
I don't actually know why this this is happening, given the result of conditional expression is true. Any help is appreciated. Thanks.
forEach won't return anything but undefined. You need to use map.
const comments =
details.comments_count >= 1
? Object.keys(details.comments_list).map(keys => {
return (
<ListItem
alignItems="flex-start"
key={details.comments_list[keys].aid}
>
<ListItemAvatar>
<Avatar>{details.comments_list[keys].aname.charAt(0)}</Avatar>
</ListItemAvatar>
<Card style={useStyles.card}>
<CardContent>
<ListItemText
primary={details.comments_list[keys].aname}
secondary={details.comments_list[keys].content}
/>
</CardContent>
</Card>
</ListItem>
);
})
: null;
console.log(comments);
I want to load components but it shows a problem that the components with the same key but I maped on selectedGroups and gave gr.id as a key it worked before the first version is
sharingTabs = selectedGroups.map(gr => (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>{gr.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={16}>
<Grid item xs>
<SharingSpacesTabs />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
));
but then I wanted to send the index in a props that's why I added another map inside the map that's what caused the problem of call back function and I aded return
sharingTabs = selectedGroups.map(function(gr) {
const indexs = groups.map((group, index) => {
if ((group.sharingspace.element = gr.id)) {
return index;
}
});
return (
<ExpansionPanel key={gr.id}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>{gr.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={16}>
<Grid item xs>
<SharingSpacesTabs id={gr.id} index={indexs[0]} />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
});
could you please help me find a solution I need it and thank you
I think you have problem in your condition, Change you function condition to properly check the equality with == or ===.
Also I am not sure what you want to do if the condition will not satisfied, map will return null for every element which does not satisfy the condition.
const indexs = groups.map((group, index) => {
if ((group.sharingspace.element == gr.id)) {
return index;
}
});
the best way to do it is to pass a second index as a second parameter in map and make the key={index}
sharingTabs = selectedGroups.map((gr, index) => {
const indexes = groups.map((group, index) => {
if ((group.sharingspace.element = gr.id)) {
return index;
}
});
return (
<ExpansionPanel key={index}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>{gr.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={16}>
<Grid item xs>
<SharingSpacesTabs id={gr.id} index={indexes[0]} />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
});