I need a way to add my react component to the screen, for each place they find the id "#card".
const container = document.querySelectorAll('#card');
ReaactDOM.render(<App />, container);
The code above doesn't render anything on the page. With the error: Uncoaught Error: Target container is not a DOM element. I've researched and found that querySelectorAll only returns a NodeList that I need to loop. However, all attempts I've tried aren't working.
Not sure if quuerySelectorAll is the right choice. Or if I need to fix how I'm calling it.
const App = () => {
return (
<div class="card_container">
{console.log(cards)}
{cards.map() => {
<div>{cardNumber}</div>
}
</div>
);
};
for (const el of document.querySelectorAll(".react-container")) {
ReactDOM.render(<App/>, el);
}
[Stack 1]
[Stack 2]
[Stack 2]
[Stack 3]
[Stack 3]
[Stack 3]
You need to actually iterate the array that querySelectorAll returns. You should also never duplicate id within a page.
const App = () => {
return (
<div>I'm a React app!</div>
);
};
for (const el of document.querySelectorAll(".react-container")) {
ReactDOM.render(<App/>, el);
}<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react-container"></div>
<div class="react-container"></div>
<div class="react-container"></div>
<div class="react-container"></div>