Develop Reference

Warning on render : Received `true` for a non-boolean attribute `className`

GEtting the following error for the div.container and span.text:
Warning: Received true for a non-boolean attribute className.
If you want to write it to the DOM, pass a string instead: className="true" or className={value.toString()}.
return (
Array.isArray(contactDetails) &&
contactDetails.map((item, index) => {
return item.type === DIVIDER ? (
<div key={index}>
<Divider variant={"middle"} className={classes.divider} />
<div className={classes.dividerText}>{item.text}</div>
</div>
) : (
item.text && (
<div className={classes.container} key={index}>
<div className={classes.icon}>{item.icon}</div>
<span className={classes.text}>{item.text}</span>
</div>
)

One of your classes-props is a boolean. You cannot push a boolean (true/false) to className.
You could console.log(classes), then you will see, which prop causes the warning.

It means at least one of the className values is boolean instead of string. we can not say anything more with this piece of code.

I got the same error when i didn't give a value to className attribute like below, probably one of your variable is null or boolean etc.
<img className src={...} .../>

How to set condition value in Reactjs

I try to set a condition
initialValue = {
this.props.noteviewReducer.isError &&
this.props.noteviewReducer.result.body
}
if (this.props.noteviewReducer.isError) true then show this.props.noteviewReducer.result.body
if not, then not show

Try something like this
<div>
{this.props.noteviewReducer.isError && (
<MyComponent initialValue={this.props.noteviewReducer.result.body} />
)}
</div>

getting an error of Expected an assignment or function call and instead saw an expression no-unused-expressions in react

I am getting an error of in the below
Line 56:11: Expected an assignment or function call and instead saw an expression no-unused-expressions
<div className="posts_container">
{
(userPosts.length) ?
(
<div>
{
userPosts.map((post,idx)=>{
<div className="smallPost">
<img className='smallPost_pic' alt='post_img' src={post.imageurl}/>
</div>
})
}
</div>
)
:
(
<h1> No posts Yet </h1>
)
}
</div>
please help me to solve this.
Thanks in advance.

The function that's passed to .map isn't returning anything.
So either add return:
userPosts.map((post,idx) => {
return (
<div className="smallPost">
<img className='smallPost_pic' alt='post_img' src={post.imageurl}/>
</div>
)
})
or replace the curly braces with parentheses:
userPosts.map((post,idx) => (
<div className="smallPost">
<img className='smallPost_pic' alt='post_img' src={post.imageurl}/>
</div>
)
)
As a sidenote, remember to add a key to the div that is returned from the .map function. More about that in React's docs: Lists and Keys

React - Split on string not having any effect

I am trying to split a given text at each \n in order to put them on individual lines.
The problem is, in React, I am using the following code:
const details = property.details !== undefined
? property.details.split("\n").map((item, i) => {
return <p key={i}>{item}</p>;
})
: "";
but there is no splitting made whatsoever. The returned array is simply the whole string. I tried the same string in the console of the browser and it works there.
Also, the typeof property.details is string.
What am I missing?
My render function for this component is:
render() {
const property = this.state.property;
const details =
property.details !== undefined
? property.details.split(/\r?\n/).map((item, i) => {
return <p key={i}>{item}</p>;
})
: "";
return (
<Fragment>
{this.state.isLoading ? (
<div className="sweet-loading" style={{ marginTop: "120px" }}>
<BarLoader
sizeUnit={"px"}
css={override}
size={200}
color={"#123abc"}
loading={this.state.isLoading}
/>
</div>
) : (
<div className="container p-4" style={{ marginTop: "4rem" }}>
<div className="row align-items-center">
<div className="row display-inline p-3">
<h3>{property.title}</h3>
<h5 className="fontw-300">{property.zone}</h5>
<h1 className="mt-5 price-font-presentation">
{property.sale_type} -{" "}
<strong>{property.price.toLocaleString()} EUR</strong>
</h1>
</div>
<Carousel>
{property.images.map(image => (
<img key={image.id} src={image.image} />
))}
</Carousel>
<div className="row p-3">
<h3 className="border-bottom">Detalii</h3>
{details}
</div>
</div>
</div>
)}
</Fragment>
);
}
Maybe I should mention that the information is taken with a django_rest api. Maybe there is a problem with returning \n in a string from there.

It might happen because client OS uses different symbols for new lines. Try this, it's multi-platform:
const details = property.details !== undefined
? property.details.split(/\r?\n/)
: [];
EDIT:
typeof property.details is string because it's string. calling split on property.details returns array, but string remains to be string.
From your updated code sample I can see that you are basically rendering details, which results in array transforming to string back again but without line seperators.
Maybe you have to map it to paragraphs for example:
<h3 className="border-bottom">Detalii</h3>
{details.map(detail => <p>{detail}</p>)}
Also, try white-space: pre; css property as alternative

Have you tried this version:
const details = property.details !== undefined
? property.details.split('\r\n').map((item, i) =>
<p key={i}>{item}</p>;
)
: '';
(It's the extra \r)

Multiple tags in list.map() syntax for React

I have the following code:
return (
</React.Fragment>
...
<div className="col-md-6">
{firstHalfy1.map(month => (<Field key={month.id} {...month}/>))}
</div>
</React.Fragment>
);
I want to add another tag/functional component after the component, but the syntax doesn't seem to work. Ideally I want something like:
{firstHalfy1.map(month => (<Field/><Component2/>))}
is this syntax possible as I am trying to render a button (Component2) after every input (Field)?
Thanks!

{firstHalfy1.map(month => (<div key={your key}><Field/><Component2/></div>))}
You need a wrapper for those components, such as a div or React.Fragment. Plus you need a key for each month.

You can use from fragment like this:
<>...
This empty tag is also fragment
{firstHalfy1.map(month => (
<React.Fragment key={month.id}>
<Field {...month}/>
<Component2/>
</React.Fragment>
))}