score:1
Accepted answer
an if statement can only return one element, in this case you're trying to return two <link>
and <button>
to make this in to one use a <react.fragment>
example
const imageframe = ({ movieid, moviename, searchword, image, personmovieid, clickable, clearfavouritemovie }) => {
return (
<div classname = "col-sm-3 mt-5 animated fadeinleftbig ">
{ clickable ? /* if clickable props is true --> go movie, else go movie again but with personal movie id ! */
<react.fragment>
<link to={{ pathname:`/movie/${movieid}`, moviename: `${moviename}`, searchword: `${searchword}` }}>
<card classname = "card-box image-frame ">
<card.img variant="top" src={image} alt="movieimg" />
</card>
</link> **!!! i want link component stays here !!!**
{
clearfavouritemovie && <button
classname = "mt-3 btn btn-warning"
onclick = { () => clearfavouritemovie(movieid)}
> bu filmi sil </button>
}
</react.fragment>
:
<link to = {{pathname: `/movie/${personmovieid}`}}> {/* person known for movies*/}
<card classname = "bg-dark text-light card-box image-frame " style = {{maxheight: "500px"}}>
<card.img variant="top" src={image} alt="movieimg" />
</card>
</link>
}
</div>
)
Source: stackoverflow.com
Related Query
- How do I convert my codes to correct jsx format?
- Java Spring: How convert HTML character codes in hex format from textarea to plain text?
- SVG in JSX - how to convert defs tag
- how convert date format in javascript reactjs
- How to set innerHTML jsx format
- How to loop inside map function using jsx format React JS
- How to convert Date format like this Fri Apr 20 2020 00:00:00 GMT+0530 (India Standard Time) to 2020-04-20T00:00:00.000Z in Javascript?
- How can I convert the object array to GraphQL format in Javascript?
- How to convert server side Json data into react-google-chart format in Reactjs
- How to convert 2021-07-14T00:00:00.000Z into a standard date in YYYY-MM-DD format
- How to convert HTML to JSX (React.js)
- How to convert react JSX files to simple JavaScript file [offline transformation]
- How to convert JSON data to XML format data and download the file in React JS
- How do I convert TSX to JSX
- How to jsx format supported in spacevim editor?
- How to convert string to JSX to using in React
- How to convert custom proptype in react jsx to typescript
- How to convert date --- Wed Feb 27 2019 11:11:16 GMT+0530 (India Standard Time) to 27-Feb-2019 format in React JS
- I have a data inside the state in T and Z format and React input accepts in the HH:MM ss format so how to convert
- How to convert SVG style to JSX
- How to convert Luxon DateTime format into string or numbers?
- How can i convert a script tag that is defined as string to a JSX object?
- How to convert storybook nested storiesOf api into CSF format
- react axios post generates json in array format. How to convert this to "name":"value" type format
- How do I specify the timezone and date object format on moment correct such that I do not get Invalid date and a moment is deprecated warning?
- How do I convert html with jsx to jsx in React.js
- How do I use gulp to convert all jsx files to JavaScript?
- How to convert string date to following date format dd-mm-yyyy as a object type in javascript
- How to convert a string into JSX in React 17
- Is this the correct way to show data in React from a fetch request, if not how do I change JSX being rendered to a component?
More Query from same tag
- Add custom option in react.js drop down and how to populate
- React-Chart-JS2 labels inside Doughnut chart
- Redirect doesn;t work, while {this.props.history} does
- next-auth custom signIn form don't pass username and password to [...nextauth].js
- Request to server each N seconds after flag
- react input chnage default value using hooks
- Material Grid refused to lay out horizontal even it's default behavior
- How to find user location on google map and focusing on where they're located using google-map-react library
- i18n translate text in a function
- How can I detect refresh page and routes change in react?
- How to initialize to an empty array if my 'students' parameter is not passed
- Is it Okay to store functions and instances of Class in redux store?
- Add icon to the start of Material-UI's Autocomplete component
- What is the difference between Props in Class and functional components in ReactJs?
- Redux + TypeScript and mapDispatchToProps
- Unable to get background service worker listener working - Error at parameter 'extraInfoSpec': Value must be one of extraHeaders, responseHeaders
- How can I allow setState to be used throughout the app with context
- Store.Dispatch() Resetting Redux Store
- React Event is always Istrusted:false
- How can I manage query parameters that are not always filled?
- rollup.js single import multiple usages
- state return by useReducer doesn't change when init value change
- how can I count number of each website when it appear in many collection?
- How to persist an object that is passed by reference in React?
- If / Else / Switch returning the wrong results
- React: Don't use keyUp for onChange events
- How to export data to excel using react libraries
- ReactJS: Error while extracting data from JSON file
- React and stateless components
- React 15.4.2 Cannot read property 'ref' of null