score:3
react will replace the entire content of the specified element with the render output when it is called - which is also why you should not render into document.body
.
you will want to use two separate containers (perhaps create another div element and give it a unique id). alternatively, if you don't need to have the separation of two react apps, you could instead combine the two into a single app:
reactdom.render(
<react.fragment>
<app />
<characterapp />
</react.fragment>,
document.getelementbyid('root')
)
score:1
`reactdom.render(
<react.fragment>
<app />
<characterapp />
</react.fragment>, document.getelementbyid('root'))`
> this will work. you can not use same 'root' for rendering 2
> components. instead you can group them in one or use different div
> ids.
score:1
how can it render two modules ? you are rendering the app
module in a div with id='root'
and then you are overwriting it with another module. its the correct behaviour you can not render two modules like that.
if you want to render both modules in the same page, create a separate component and import your app
and characterapp
in that module and then render that new component in the dom i.e
reactdom.render( <yournewcomponent /> ,
document.getelementbyid('root')
)
and if you do not want to create a seperate component, you can just simple do this.
reactdom.render(
<react.fragment>
<app />
<characterapp />
</react.fragment>,
document.getelementbyid('root')
)
score:1
this code is the culprit:
reactdom.render(<app />, document.getelementbyid("root"));
reactdom.render(<characterapp />, document.getelementbyid("root"));
you're using the same div
for showing your apps, so the second statement is replacing the app
component with characterapp
.
you can create two div
s in index.html
, say, div#root-app
and div#root-character-app
, and then render the two components to the two containers respectively.
Source: stackoverflow.com
Related Query
- React is not rendering both modules to the DOM
- React Router DOM not rendering the page
- React not rendering anything on the DOM
- React wrapper: React does not recognize the `staticContext` prop on a DOM element
- How to solve Warning: React does not recognize the X prop on a DOM element
- React does not recognize the `computedMatch` prop on a DOM element.
- Material-UI React does not recognize the `underlineStyle` prop on a DOM element
- Warning: React does not recognize the X prop on a DOM element
- How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
- react router not rendering the component
- Jest enzyme shallow test is not rendering all elements of the React component
- Preventing react from rendering unchanged componets into the virtual DOM
- React does not recognize the `toggleNode` prop on a DOM element
- Input-Component: React does not recognize the prop on a DOM Element
- React VX Chart: React does not recognize the `xScale` prop on a DOM element
- React does not recognize the `isActive` prop on a DOM element - styled-components
- Warning: React does not recognize the `viewState` prop on a DOM element
- React does not recognize the `initialValue` prop on a DOM element
- Webpack, React & Babel, not rendering DOM
- react router dom not working when changing the path
- Why does setState Hook from React is rendering twice even not changing the state?
- React not updating the DOM (Laravel)
- react prop not rendering in parent component and even in the same one
- React does not recognize the X prop on a DOM element
- State in react is not rendering to the screen
- Image is not rendering in the DOM while passing as props in the App.js file?
- Warning: React does not recognize the `warnKey` prop on a DOM element
- React does not recognize the `justifyContent` prop on a DOM element
- React router dom passing data from parent component to child router component does not pass the props.match
- wrote a React code snippet to implement conditional rendering and am not able to update the state of {Left} and {Right}
More Query from same tag
- Function is executing even after leaving the page React js
- React-Router is refreshing page when I follow a route using <a> tag
- I have a stopwatch in reactjs, how can I add each number into some sort of array to show each number?
- Is there a way to have one event hanlder for these 3 events?
- React Component vs Element for reusability in the same file
- jQuery click in reactJS. Bug two times clicking
- How to separate home page content from the rest of the pages in react router?
- TypeError: props.articles.map is not a function in reactjs
- <Link> does not work as expected in NextJS
- How to make sure a React state using useState() hook has been updated?
- Using leaflet and need to update component. How can I update the values in my constructor?
- Detect if the click is in bar or outside of bar in ChartJS
- How can I dynamically generate several MUI Select elements and their options?
- Can't make very basic directed graph using cytoscape.js and react
- Error: ./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'
- why wont react class print json unless props
- How to use window.scrollTo with react/material UI?
- Dynamic Routing in react does not render, trows weird error in console
- React TypeScript 16.8 How to add a dependency to useEffect()
- Creating a React component library with Webpack and Typescript but WP keeps bundling React
- hand over function to onClick on props with parameters
- Getting repetitive "Cannot find type definition" error on VS Code, but not in TSC
- Does useEffect determine whether component rerendring?
- React hooks value renders correctly but not updated inside a callback function of addEventListener
- How to implement secure "Remember me"
- changing button text according to filter
- How to dispatch Redux store data without having to receive it in a React component?
- Resize react-beautiful-dnd
- React onClick event to only fire for the clicked div and not the other once
- How to rerender when refs change