score:5
Accepted answer
<pencilfill classname="mr-10" size={ 10 }/> + 'view'
the first part of this is an object, and the second part is a string, so when you concatenate them together you get [object object]view
. what you probably meant to do was a fragment, as in:
<react.fragment>
<pencilfill classname="mr-10" size={ 10 }/>
view
</react.fragment>
or using the shorthand notation:
<>
<pencilfill classname="mr-10" size={ 10 }/>
view
</>
score:1
don't use +
operator as it concats jsx
with string.
try ternary only at the place that you want to change like this.
<pencilfill classname="mr-10" size={ 10 }/>
{quote.is_archived ? 'view' : 'edit'}
Source: stackoverflow.com
Related Query
- JSX inside ternary not returning desired result
- map is not a function returning div inside ternary operator
- Map inside a Map function is not returning jsx
- Switch case inside JSX not working: ReactJS
- Why is ternary operator in jsx not working
- React hooks not returning updated state values inside callback function from library events (FabricJS)
- onClick inside mapped object JSX for React NextJS not working
- Function inside JSX, is not returning the elements: ReactJS
- Page does not reload on state change inside jsx
- Graphql query result returning correctly in the UI, but data showing as "undefined" inside app
- React, Divs inside ternary condition are not rendering
- Ternary operator inside render is not behaving correctly -react
- Reactjs function not returning JSX
- Typescript not inferring correct type after type check inside a ternary operator
- Not able to see anything written inside the return component in JSX
- Firebase call inside useEffect is not returning data properly
- react not rendering JSX inside map function
- React js Calculator final result shows inside console.log but not in the browser
- ternary operator not rendering markup in react jsx
- JSX function in React not returning data?
- Ternary expression does not update the jsx template
- How to access dom element that is not inside JSX in React?
- React Router Redirect component not giving the desired result
- returning component inside function not working
- React functional component not returning result without generic HTML tag
- Function not returning value in react JSX
- JSX not returning map function with React
- JSX not returning expected HTML
- Add function call inside ternary operator in JSX
- Multiple condition in ternary operator in jsx my component not showing
More Query from same tag
- Do I have to use a constructor when importing an external module I made in React?
- How do I use listen for only 1 variable changing in React, while also using other variables?
- How can I use map to combine an array/nested array into a div?
- How to make sure user enters valid Regex on an HTML form input?
- How can I mock an imported React hook/module and test that it's being called properly on different test cases using Jest
- Working with Audio objects in React/ Redux
- How to fill only a part of the SVG?
- Simple React.render() gives error
- How to Download Pdf File in React From Api
- React Hook useCallback has an unnecessary dependency: 'price'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps
- Display different values in a popup in React
- Get Bootstrap theme into React app
- An icon of fontawesome doesn't apeear in react code
- useEffect with dependency called infinitely
- TypeError: Cannot read property 'foo' of null - Object, React
- Reading multiple files using FileRead() and adding them on React State
- how to create array length fixed in react js
- Why React hook useState don't increment index onClick?
- Reactjs useReducer hook error ReferenceError: Cannot access 'reducer' before initialization
- How to identify, inside an onClick event handler, which out of many polygons plotted on the same map (using react-leaflet) was clicked?
- How to pass a function with arguments as prop in React without creating an arrow function
- React.js child state not re-rendering even after calling setState?
- React nested json object error thiks it is object
- React Router Dom, update component based on URL fails
- Azure Static App Route configuration with React Router
- Loop of Path and Sampler in Tone.js
- ./node_modules/material-ui-icons/AccessAlarm.js Module not found: Can't resolve 'material-ui/SvgIcon'
- How to chain two Fetch API requests with Async/Await
- React Router doesn't render
- Getting "Unhandled Rejection (SyntaxError): Unexpected end of JSON input"