We Keep Coding

The split method is not working - want to split the date

I'm trying to split the date on both release_date and first_air_date however the split() method isn't working for me. What am I doing wrong - please explain! I'm a beginner. Many thanks in advance!
Below is my code:
import { Typography } from "#mui/material";
import { Box } from "#mui/system";
import React from "react";
function Card({ daily }) {
let text = daily.release_date;
let airDate = daily.first_air_date;
const myArray = text.split("-");
const splitDate = airDate.split("-");
const word = myArray[0];
const date = splitDate[0];
console.log(word);
console.log(date);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${daily.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
{daily.original_title ? (
<Typography sx={{}}>{daily.original_title}</Typography>
) : (
<Typography sx={{}}>{daily.name}</Typography>
)}
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{/*word*/}
</Typography>
{daily.release_date ? (
<Typography sx={{}}>{text}</Typography>
) : (
<Typography sx={{}}>{/*airDate*/}</Typography>
)}
</Box>
</Box>
);
}
export default Card;
I used the split() method in another component, here is the code for that one and it worked fine:
import React from "react";
function Card({ recomendations }) {
let text = recomendations.release_date;
const myArray = text.split("-");
let word = myArray[0];
console.log(word);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${recomendations.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
<Typography sx={{}}>{recomendations.original_title}</Typography>
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{word}
</Typography>
</Box>
</Box>
);
}
export default Card;

My buttons are all attached together via state

I am currently working on a liking feature for posts, as well as replies and shares. Whenever I hit like or reply on one post, all other posts also get highlighted - how can I fix this so only the post that i like gets liked versus all posts getting liked?
My code in question:
<InfiniteScroll height='100%' dataLength={numberOfPosts.length} next={fetchMoreData} hasMore={hasMore} loader={<Loading style={{position: 'absolute', left: '50%'}}/>}
id='all-post-container' scrollThreshold={0.5} endMessage={<p style={{ textAlign: "center" }}>
<b>That's all folks!</b>
</p>}
style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}>
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
spacing={45}
>
{numberOfPosts.map((key, i) => {
return (
<Grid container item>
<div id="post-container" style={{margin: '5%', position: 'absolute', width: '90%', height: '40%', backgroundColor: 'white', borderRadius: '30px', overflow: 'auto'}}>
<Avatar src={<AvatarPicture/>} style={{position: 'absolute', left: '1%', top: '3%', height: '60px', width: '60px'}} size='lg'></Avatar>
<p style={{position: 'absolute', left: '9%', top: '-5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', overflow: 'auto'}}>#{state.posts[i].username}</p>
<p style={{position: 'absolute', left: '9%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#6D7683'}}>{state.storage.location}</p>
<p style={{position: 'absolute', left: '20%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#2D87FF'}}>{state.posts[i].date}</p>
<div id="text-container" style={{position: 'absolute', top: '30%', left: '5%', backgroundColor: '#FFFBEE', height: '30%', width: '90%', borderRadius: '16px', overflow: 'scroll'}}><p style={{position: 'absolute', top: '20%', left: '50%'}}>{state.posts[i].text}</p></div>
<TextField InputProps={{
startAdornment: (
<InputAdornment>
<Avatar src={state.storage.profileImageURL} />
</InputAdornment>
),
classes: {
notchedOutline: 'notched-outline-border-radius'
}
}} maxRows={10} inputProps={{maxLength: 500}} multiline style={{position: 'absolute', left: '5%', top: '78%', width: '90%', background: '#F8FAFF', border: '1px solid #D9E1F9', borderRadius: '16px'}} placeholder='Write your comment'></TextField>
<IconButton onClick={() => setLike(!like)} style={{ position: 'absolute', top: '60%', left: '5%'}} onMouseLeave={() => setMouseOver(false)} onMouseOver={() => setMouseOver(true)}>{like && mouseOver ? <HeartBrokenIcon style={{color: 'red'}}/> : like ? <FavoriteIcon style={{color: 'red'}} /> : <FavoriteBorderTwoToneIcon /> }</IconButton>
<p style={{position: 'absolute', top: '59%', left: '9%'}}>{state.posts[i].likes}</p>
<IconButton onClick={() => setReply(!reply)} style={{ position: 'absolute', top: '60%', left: '13%'}}>{reply ? <MessageIcon color="primary"/> : <MessageOutlinedIcon/>}</IconButton>
<p style={{position: 'absolute', top: '59%', left: '17%'}}>{state.posts[i].comments}</p>
<IconButton style={{ position: 'absolute', top: '60%', left: '23%'}}><IosShareOutlinedIcon /></IconButton>
<p style={{position: 'absolute', top: '59%', left: '27%'}}>{state.posts[i].shares}</p>
</div>
</Grid>
)})}
</Grid>
</InfiniteScroll> : <div id='content-loader' style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}><Loading size='lg' style={{position: 'absolute', left: '50%', top: '50%'}}/></div>}

You need to have a separate state to include all the like states in the numberOfPosts array.
Add a state to hold likes.
const [likes, setLikes] = useState([]);
Add a useEffect to change the array length of like state when array is expanding in infinite scroll
useEffect(() => {
setLikes(numberOfPosts.map((_, i) => (likes[i] === undefined ? false : likes[i])));
}, [numberOfPosts])
Add a function to change the like state in the particular index.
const handleLike = (index) => {
setLikes(likes.map((val, i) => index === i ? !val : val));
}
Change the handle like function in the button.
{numberOfPosts.map((key, i) => {
...
<IconButton onClick={() => handleLike(i)} ... >{likes[i] && mouseOver ? <HeartBrokenIcon style={{color: 'red'}}/> : likes[i] ? <FavoriteIcon style={{color: 'red'}} /> : <FavoriteBorderTwoToneIcon /> }</IconButton>
...
}

How do i stick content in between two other items using CSS?

I am currently working on the design of user's post for my website. However, whenever the user uploads a video, it currently looks like this:
The post looks ugly and the video is placed inside of the yellow textbox, I wanna place it just below the yellow textbox. Here is an image showing where I would like the video to be placed (forgive me for the ugly handwriting):
And when the video is placed, I would like the content around it to be "pushed away" so they are not stuck on top of eachother.
Here is my code in question:
<Grid container item>
<div id="post-container" style={{margin: '5%', position: 'absolute', width: '90%', height: '40%', backgroundColor: 'white', borderRadius: '30px', overflow: 'auto'}}>
<Avatar src={<AvatarPicture/>} style={{position: 'absolute', left: '1%', top: '3%', height: '60px', width: '60px'}} size='lg'></Avatar>
<p style={{position: 'absolute', left: '9%', top: '-5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', overflow: 'auto'}}>#{state.posts[i].username}</p>
<p style={{position: 'absolute', left: '9%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#6D7683'}}>{state.storage.location}</p>
<p style={{position: 'absolute', left: '20%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#2D87FF'}}>{state.posts[i].date}</p>
<div id="text-container" style={{position: 'absolute', top: '30%', left: '5%', backgroundColor: '#FFFBEE', height: 'auto', width: '90%', borderRadius: '16px', overflowY: 'auto', overflowWrap: 'break-word', wordWrap: 'break-word', msWordBreak: 'break-word', wordBreak: 'break-word'}}><p style={{margin: '1em'}}>{state.posts[i].text}</p>{<ReactPlayer url={state.posts[i].video} />}</div>
<TextField InputProps={{
startAdornment: (
<InputAdornment>
<Avatar src={state.storage.profileImageURL} />
</InputAdornment>
),
classes: {
notchedOutline: 'notched-outline-border-radius'
}
}} maxRows={10} inputProps={{maxLength: 500}} multiline style={{position: 'absolute', left: '5%', top: '78%', width: '90%', background: '#F8FAFF', border: '1px solid #D9E1F9', borderRadius: '16px'}} placeholder='Write your comment'></TextField>
<IconButton onClick={() => handleLike(i)} style={{ position: 'absolute', top: '60%', left: '5%'}} onMouseLeave={() => setMouseOver(false)} onMouseOver={() => setMouseOver(true)}>{like[i] && mouseOver ? <HeartBrokenIcon style={{color: 'red'}}/> : like[i] ? <FavoriteIcon style={{color: 'red'}} /> : <FavoriteBorderTwoToneIcon /> }</IconButton>
<p style={{position: 'absolute', top: '59%', left: '9%'}}>{state.posts[i].likes}</p>
<IconButton onClick={() => handleReplies(i)} style={{ position: 'absolute', top: '60%', left: '13%'}}>{replies[i] ? <MessageIcon color="primary"/> : <MessageOutlinedIcon/>}</IconButton>
<p style={{position: 'absolute', top: '59%', left: '17%'}}>{state.posts[i].comments}</p>
<IconButton style={{ position: 'absolute', top: '60%', left: '23%'}}><IosShareOutlinedIcon /></IconButton>
<p style={{position: 'absolute', top: '59%', left: '27%'}}>{state.posts[i].shares}</p>
</div>
</Grid>

Material UI Dialog Box Shadow Removal

I am currently using the Material UI dialog to show some information about a location marker. I would like to disable the ugly box shadow surrounding the component. I have set box-shadow: none and have tried multiple solutions, but none of them seem to work!
Screenshot
Here is my code for this component
const useStyles = makeStyles({
root: {
maxWidth: '400px',
marginLeft: '5px',
width: '446px',
height: '200px',
marginTop: '50px',
overflow: 'hidden',
boxShadow: 'none',
},
closeButton: {
color: Colours.Black,
float: 'right',
paddingTop: '15px',
marginRight: '5px',
marginLeft: 'auto',
height: '24px',
width: '24px',
},
flexContainerContent: {
display: 'flex',
justifyContent: 'space-between',
paddingRight: '10px',
},
flexContainerButtons: {
display: 'flex',
justifyContent: 'space-between',
padding: '0px 18px 15px 18px',
},
});
const InfoWindow = ({
title,
address,
open,
handleClose,
}: {
title: string;
address: string;
open: boolean;
handleClose: () => void;
}) => {
const infoStyles = useStyles();
return (
<Dialog
classes={{ root: infoStyles.root }}
open={open}
onClose={handleClose}
hideBackdrop
disableEnforceFocus
>
<Container classes={{ root: infoStyles.flexContainerContent }}>
<DialogContent style={{ overflow: 'hidden', paddingLeft: '0px', boxShadow: 'none' }}>
<Typography variant="body1" color="textSecondary">
Name:
<span
style={{ display: 'inline', color: Colours.Black }}
color="textPrimary"
>
{` ${title} `}
</span>
</Typography>
<Typography variant="body1" color="textSecondary">
Location:
<span
style={{ display: 'inline', color: Colours.Black }}
color="textPrimary"
>
{` ${address} `}
</span>
</Typography>
</DialogContent>
<CloseIcon
onClick={handleClose}
classes={{ root: infoStyles.closeButton }}
/>
</Container>
<DialogActions style={{ padding: '0px', boxShadow: 'none' }}>
<Container classes={{ root: infoStyles.flexContainerButtons }}>
<Button size="small" style={{ color: Colours.Danger }}>
Delete
</Button>
<Button size="small" style={{ color: Colours.Secondary }}>
Edit
</Button>
</Container>
</DialogActions>
</Dialog>
);
};
export default InfoWindow;
Would really appreciate any sort of help or advice!

You need to target the Paper inside the Dialog.
One way of doing this is adding this CSS rule:
.MuiDialog-container .MuiPaper-root {
box-shadow: none;
}

Adding react components to header based on the page

On all but two pages of my site I would like the header to include two buttons. How can I make the header aware of this so it includes the buttons when needed and doesn't for the other two pages. I'm using React and Gatsby.
Could I accomplish this by adding if statements to my component? If so I'm not sure how to move beyond this step.
const isHomepage = pathname == `/`
const isContact = pathname == `/contact/`
let styles = {}
if (isHomepage) {
}
} else if (isContact) {
} else {
}
This is my code for the header:
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
</h3>
</div>
</div>
</div>
)
export default Header

Use conditional rendering based on location.pathname
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
</h3>
</div>
</div>
</div>
)
export default Header