score:3
you are using an and short circuit evaluation, which evaluates each expression (before the &&
) and returns the outcome if it's falsy, or returns the last one if all others are truthy.
in this case the result of the entire expression is the product of the map when there's an array, since the h1 expression results in an object, which is always truthy.
to render the h1 as well use two separate expressions:
render() {
const arr = this.state.items;
return(
<card>
<card.body>
<div>
{arr.length > 0 && <h1>additional text</h1>}
{arr.length > 0 &&
arr.map((item) =>
<badge key={item.tostring()} pill variant='primary'>
{item}
</badge>
}
</div>
</card.body>
</card>
);
another option is to move all conditionally rendered expressions to another function, and call it when the expression is truthy:
renderbadges(arr) {
return (
<>
<h1>additional text</h1>
{arr.map((item) => (
<badge key={item.tostring()} pill variant='primary'>
{item}
</badge>
)}
</>
);
}
render() {
const arr = this.state.items;
return(
<card>
<card.body>
<div>
{arr.length > 0 && this.renderbadges(arr)}
</div>
</card.body>
</card>
);
score:0
from what i see you are trying to use conditional statements wrong. from the docs here.
expr1 && expr2
means ifexpr1
can be converted totrue
, returnsexpr2
; else, returnsexpr1
.
i.e your first expression arr.length > 0
returns true so,
your second expression is evaluated <h1>...</h1>
which is also evaluated true. therefore, final expression is evaluated and returned.
so to display both the components you could use fragments or as others have suggested using multiple conditionals or wrapping in a div
.
{
arr.length > 0 &&
<>
<h1>additional text</h1>
{
arr.map((item) =>
<badge key={item.tostring()} pill variant='primary'>
{item}
</badge>
}
</>
}
here, <>
and </>
are shorthands for <react.fragment>
and </react.fragment>
and will give you the same tree structure you might have wanted.
score:1
this is because arr.length > 0 && <h1>additional text</h1>
evaluates to true and you see the tags.
a cleaner approach would be to do something like this (just a suggestion, there are many other possible and equally correct ways):
const getpills = (items) => {
const pills = [<h1>additional text</h1>];
items.foreach(item => {
pills.push(
<badge key={item.tostring()} pill variant='primary'>
{item}
</badge>
);
})
return pills;
};
render() {
const arr = this.state.items;
return(
<card>
<card.body>
<div>
{arr.length ? getpills(arr) : ''}
</div>
</card.body>
</card>
);
score:1
try wrapping your content in a div as you are having the same condition, so no need to duplicate condition, like this:
render() {
const arr = this.state.items;
return(
<card>
<card.body>
{arr.length > 0 && (
<div>
<h1>additional text</h1>
{arr.map((item) =>
<badge key={item.tostring()} pill variant='primary'>
{item}
</badge>
}
</div>)
</card.body>
</card>
);
score:1
because && checks its preceding condition or statement to be truthy
render() {
const arr = this.state.items;
return(
<card>
<card.body>
<div>
{arr.length > 0 && <> <h1>additional text</h1>
arr.map((item) =>
<badge key={item.tostring()} pill variant='primary'>
{item}
</badge>
</>
}
</div>
</card.body>
</card>
);
Source: stackoverflow.com
Related Query
- React conditional rendering only partially happening
- Conditional Rendering in React Page Refresh Only Happens with Ctrl + F5
- Warning: Functions are not valid as a React child, using a conditional rendering
- React conditional rendering of multiple child components
- React Router VS Conditional Rendering
- Gatsby: React conditional rendering based on window.innerWidth misbehaving
- Single React Component rendering with Babel Standalone with only index.html and Component
- Conditional Rendering in React won't work, state not working properly?
- How to implement conditional rendering while the children component calling useState() in react hooks?
- react - conditional rendering inside component return function
- Conditional Rendering of child elements in React
- React Js component rendering only once after state change
- Does React only re-rendering what has changed benefit rendering speed?
- React onClick function only fires once upon rendering to DOM
- Conditional Rendering in React application using tsx
- React conditional style not rendering properly
- Conditional rendering in react for a multi language app in react
- Conditional rendering of React components without using ternary operators
- Testing a child component's conditional rendering in React Jest/Enzyme
- Css transition not working on conditional rendering in React
- Components with 'Variants' in React - Conditional Rendering
- How to make a transition when using conditional rendering in React
- Conditional rendering in react js(Condition inside one more condition)
- "Unexpected token, expected ," when I try to do conditional rendering in react with stateless functional component
- testing conditional rendering that relies on state using react testing library
- React Router only rendering one route
- React JSX conditional rendering of column layout
- Conditional form rendering in react
- react router only rendering first route
- Conditional rendering with && operator within react return statement
More Query from same tag
- How to send one or more files to an API using axios in React js?
- Why the table data is not updated immediately after performing an action for the table
- create-react-app npm run build command
- Simple Redux-React trying to updating state by this.props.dispatch
- CRUD Delete all users
- Center one div and push other to the right in the same container
- how to generate rechart dynamic x axis values
- How to display an array of strings in react component
- How to display defaultValues with useFieldArray hook in controlled components in react-hook-forms
- Calling setState in render is not avoidable
- useState variable is called before useEffect API call
- How to correctly change my state in my reducer
- React simple "Hello World" won't render
- Programmatically upload file on Sharepoint using ReactJs
- VSC Debuging React, cannot create breakpoints / attach to process
- How to add default value to react creatable skills
- how to remove comments in nested arrays using useReducer?
- Server Side Rendering with React Router Dom getting error: Warning: React.createElement: type is invalid -- expected a string
- not assignable to type 'IntrinsicAttributes & ContentOutlineProps & ContentBrainstormProps' for dynamically rendered component
- Toggling True and False in Redux State via a Checkbox
- react-file-viewer renders any file very small
- Destructing [] vs {}
- What is the purpose of "additionalItems" property on arrays in rjsf?
- this.state.annonces.map is not a function
- react component not rerendering when props change
- Unmounted setState warning even though the component is mounted
- how to get updated quantity when Add to cart function is called React or Javascript
- How to redirect to another page after Stripe React successful response?
- Is there a way to disable apollo-link-dedup when using apollo useQuery?
- weird problem. adding 1 to 0 doesnt do anything