score:0
well, react.js works beautifully on single page applications. that said, your item list(<ul>...</ul>
) should be another react component, let's call it itemlist, so you can make the like component a mixin and then include the mixin in any other component (itemlist) you want. then you only need to attach the itemlist component into the html.
if the item list is already a react component all you need to do is to use the jsx notation in each item like this:
<li>
<span>item name</span>
<img src="itemimage.jpg"/>
<likebutton/>
</li>
edit
based on op comment:
so, if the <ul>
is plain html, you definitely cannot use the jsx syntax to add the like button or anything similar to what you would do in angular.
i still think that the best approach is to have the item list extracted into another component but if you want to stick to it the only, ugly, way i can imagine is to have another html tag, let's say a div, inside each div and then inject the react component when the dom is loaded, something like
<li>
<span>item name</span>
<img src="itemimage.jpg"/>
<div class="likeanchor"></div>
</li>
<script type="text/babel">
reactdom.render(<likebutton/>, document.getelementbyclass('likeanchor'));
</script>
probably iterating over all the .likeanchor elements.
Source: stackoverflow.com
Related Query
- Using react.js along side standard HTML
- How to query by text string which contains html tags using React Testing Library?
- Using Static HTML with React
- How to render a react element using an html string?
- React props: Using an HTML entity within JSX dynamic content?
- 'ReferenceError: Headers is not defined' when using Headers in a server side rendered react project
- generating pdf from Html in React using html2canvas and jspdf
- Using express and es6 to render react and jsx server side
- Warning: <VIEW /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
- How to add floating action button on the right-bottom side of the screen using material ui in react
- Render HTML inside a React app using iframe
- How we can convert client side rendering react js app to server side rendering using react router 4?
- Serving REACT component using express is not working (just html file is rendered)
- Getting line breaks with string literals in html elements using React
- how to filter all columns of html table using react js?
- Unable to figure out how to highlight or select individual objects in InstancedMesh and display custom HTML tooltip using react three fiber
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- React using external css along with bootsrap framework classes
- React component rendered twice using server side rendering
- Dynamic meta tags in server side using react
- How to display HTML received in JSON using React
- How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?
- Adding html class in react dynamically using function?
- React App Not Rendering When Using JS in HTML
- onChange the textbox value is not updating in HTML form using React
- Simple prototype using react html
- Change html attribute value does not have data with onclick event using react
- Approach for different HTML structure with React and using the same components
- React CRA with SSR configuration throws 404 when using the resulting html
- How to pass data from blade.php file to a react component using HTML element attributes?
More Query from same tag
- Update the Old and New Value in Redux
- HTML: How to download a pdf file using a link
- Object is undefined while have data
- Make default volume to 50% in react-player
- Rendering / Updating list stored in local storage
- Is it possible to call an actions function in my reducer from a route in Express?
- In react, how to store object in array and iterate the array index by 1?
- Material-UI autocomplete - Only show options when click icon
- Accessing Reducer in container returns undefined
- How to render a new message without re-rendering previous messages in react?
- React Typescript: Cannot read properties of undefined
- How to pass props from child to map() in parent's component?
- How to change the substring css in JavaScript
- React Error - Uncaught Invariant Violation: Element type is invalid
- material ui slider component onChange event not working with Fromik handleChange event
- Use custom build output folder when using create-react-app
- How to print at a specific z-index?
- my data test id is there but my test cannot find it react enzyme jest unit tests
- How to add event listener to a ref?
- React Typescript: Antd Table filter
- Printing the results from fetch() in React
- Is there a way to use a font from my website inside an iframe
- If-else in React Stateless functional components
- When Ever i make user to signup through firebase he is authenticate but data is not written in firebase db?
- Passing multiple value and setter pairs to Context.Provider in React
- TypeError: Failed to fetch - react js
- Video tag with autoplay does not work in react
- How to get error message in Redux toolkit?
- How to get github username in Firebase Github Auth
- Passing input value to my graphql mutation - react/react-apollo