We Keep Coding

I have a component I want to appear once the timer is done

I have my component CountDownSquare I want to disappear once the timer is done fully counting down. I have Data in homePageData that holds the main text in a h3 element, this text should appear once the timer is fully done. Here's a ternary statement I attempt to assign but it isn't assigned to anything the way I thought it would be. Here is a snippet of what I thought of
const { homePageData } = props;
{homePageData[0].showCountdown ? <CountDownSquare/>: styles.homeBody}
return (
homePageData && (
<Layout>
<div className={styles.Home}>
<Image src={wordmark} alt="Hammer and Hope wordmark" />
<CountDownSquare >
</CountDownSquare>
{/* <div className={styles.homeBody}>
<h3 className={styles.mainText}>{homePageData[0].mainText}</h3> */}
<Nav />
</div>
</Layout>
)
);
} ```

I am assuming homePageData[0].showCountDown is a boolean which is true if the countdown is complete in the parent component.
You need to add conditions while rendering your component.
The following snippet will render the CountDownSquare component and the h3 tag with homePageData[0].mainText if homePageData[0].showCountdown is true.
const { homePageData } = props;
return (
homePageData ?? (
<Layout>
<div className={styles.Home}>
<Image src={wordmark} alt="Hammer and Hope wordmark" />
{homePageData[0].showCountdown ??
<CountDownSquare >
</CountDownSquare>
<div className={styles.homeBody}>
<h3 className={styles.mainText}>{homePageData[0].mainText}</h3>
</div>
}
</div>
</Layout>
)
);

Background Image Style is not working in react

idk why background image style is not working on react,
{
musics && musics.map((name, i) => {
console.log(typeof name.imageURL);
return(
<Fragment key = {i}>
<div className = "music-preview-box">
<div className = "user-musics-content">
<div id = "album-cover" style ={{backgroundImage: "url("+name.imageURL+")"}}>
</div>
</div>
</div>
</Fragment>
)
}
}
when i console log it shows the url, when i put the real url instead of name.imageURL it works. but when i only keep name.imageURL it doesnt work

Try to double quotes the url("...")
<div id = "album-cover" style={{ backgroundImage:`url("${name.imageURL}")` }}></div>

What about -
<div id = "album-cover" style ={ { backgroundImage: "url('+name.imageURL+')" } }>
or
<div id = "album-cover" style ={ { backgroundImage: `url("${name.imageURL}")` } }>

React Custom component is not getting rendered as expected

I am expecting text : SMALL Medium, Big rendered on screen , but its not getting rendered
function Box(prop){
const ele = <div className={prop.cn}>
</div>
return ele
}
const ele = <div className="container">
<Box cn='small'>SMALL</Box>
<Box cn='medium'>Medium</Box>
<Box cn='medium'>BIG</Box>
</div>
ReactDOM.render(ele, document.getElementById('root'));
Babel is compiling this JSX to this the picture below, I don't know why children array is not getting populated in BOX function. plz help

use :
function Box(prop){
const ele = <div className={prop.cn}>
{prop.children}
</div>
return ele
}

You should use children prop for provide Box element content to the div element inside it:
function Box({cn, children}){
const ele = <div className={cn}>
{children}
</div>
return ele
}

How to render conditional with classNames with Reactjs

I am trying to use classNames to replace the conditional below in one line.
My problem is that i am not sure what is the right way to write the code because of the div etc...
I have the codes below :
conditional
const { pageTitle, removeTitle = false } = props; # destructuring
let result;
if(removeTitle){
result = <div className="header-without-title">{pageTitle}</div>;
} else {
result = <div className="header-with-title">{pageTitle}</div>;
}
return (<div className="result-title">{result});
};
If the div did not exist, i could write something like this...
const result = classNames({"header-without-title": removeTitle, "header-title": !removeTitle});
But i am not sure now that I have the div , I would appreciate some help here...
A solution outside of JSX would be very helpful

return (
<div className="result-title">
<div className={`header-${removeTitle ? 'without-title' : 'with-title'}`}>{pageTitle}</div>
</div>
);
or with use https://github.com/JedWatson/classnames
return (
<div className="result-title">
<div className={classNames({ 'header-without-title': removeTitle, 'header-with-title': !removeTitle })}>
{pageTitle}
</div>
</div>
);
EDIT:
A solution outside of JSX
const result = (
<div className={classNames({ 'header-without-title': removeTitle, 'header-with-title': !removeTitle })}>
{pageTitle}
</div>
);
return (
<div className="result-title">
{result}
</div>
);

You can just inline classNames function
const { pageTitle, removeTitle = false } = props;
const result = classNames({"header-without-title": removeTitle, "header-title": !removeTitle});
return (
<div className="result-title">
<div className={result}>
{pageTitle}
</div>
</div>);
);

There are several answers to this. Depends of each case
Ternary between two classes in React:
<div className={`header-${removeTitle ? 'without-title' : 'with-title'}`}>
Ternary between class or null in React Javascript:
<div className={removeTitle ? 'without-title' : null}>
Ternary between render class or not in React Javascript and Typescript:
<div className={...(removeTitle ? { className: 'without-title' } : {})}>

React.js: Set image as div background inside map function

Trying to set image as div background inside map function in React.js project, but I can't access post.featured_image_src outside map function and set as background in the divStyle variable:
class Archive extends Component {
render() {
let allPosts = DataStore.getAllPosts();
let pageData = DataStore.getPageBySlug('archive');
let acf = pageData.acf;
const divStyle = {
backgroundImage: 'url(' + post.featured_image_src + ')'
}
return (
<div>
<h1>{pageData.title.rendered}</h1>
<div className="post-container">
<div className="post-wrapper">
{allPosts.map((post, i) => {
return (
<div className="post" key={i}>
{post.featured_image_src
? <a href={post.link}><div style={divStyle}/></a>
: null}
<h3 className="post-title"><a href={post.link} dangerouslySetInnerHTML={{__html:post.title.rendered}} /></h3>
</div>
)
}
)}
</div>
</div>
</div>
);
}
}
Any tips would be oh so lovely .. <3

The problem is that post is not defined when you try to access it to define styles
const divStyle = {
backgroundImage: 'url(' + post.featured_image_src + ')'
}
You could move have this logic as a function
const divStyle = (src) => ({
backgroundImage: 'url(' + src + ')'
})
return (
<div>
<h1>{pageData.title.rendered}</h1>
<div className="post-container">
<div className="post-wrapper">
{allPosts.map((post, i) => {
return (
<div className="post" key={i}>
{post.featured_image_src
? <a href={post.link}><div style={divStyle(post.featured_image_src)}/></a>
: null}
<h3 className="post-title"><a href={post.link} dangerouslySetInnerHTML={{__html:post.title.rendered}} /></h3>
</div>
)
}
)}
</div>
</div>
</div>
);

For obvious reasons you cannot use the variable before its defined.
You can rather replace <div style={divStyle}/> with:
<div style={ backgroundImage: "url(" + post.featured_image_src + ")" } />
OR, as suggested by #Shubham, use a method that will return the desired style object:
const divStyle = (imgSrc) => ({
backgroundImage: `url(${imgSrc})`
})
In render:
<div style={this.divStyle(post.featured_image_src)}/>

{ post.featured_image_src
? <a href={post.link}>
<div className="post-img" style={{backgroundImage: `url(${post.featured_image_src})`}}/>
</a>
: null
}