Questions tagged [react-dom]

React package for working with the DOM.

npm install react react-dom

This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which will be shipped as react to npm.

Usage

In the browser

var React = require('react');
var ReactDOM = require('react-dom');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
 
ReactDOM.render(<MyComponent />, node);

On the server

var React = require('react');
var ReactDOMServer = require('react-dom/server');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
 
ReactDOMServer.renderToString(<MyComponent />);
1131 questions
-1
votes
1 answer

How to realize a unique link in React?

I am getting data from a cocktail database, each cocktail has its own ID. (For example 12345) Inside the component that renders the cocktail recipe {cocktailId} as prop. For example: I want to realize "share…
Denis
  • 65
  • 2
  • 7
-1
votes
1 answer

How could i change navbar background color using "props.location.pathname" React js

I am trying to change navbar color color depending on the page. I want it to be background: "rgba(255,255,255, .0)" when location path === "/" and white on every other pages. const root = props.location.pathname const classes = useStyles() …
Stas Pegov
  • 37
  • 5
-1
votes
2 answers

history.push is not a function

i am trying to build a login page and when the create account button is clicked in the login /signup page, checking the authentication of the user, it should return to the home page. But it is showing the error import React, { useState } from…
-1
votes
3 answers

'ReactDOM' is not defined no-undef

index.js is as follows: import './index.css'; import { render } from "react-dom"; const { React } = require('react'); const { App } = require('./App'); const { serviceWorker } = require('./serviceWorker'); ReactDOM.render( < App / > ,…
Mayank
  • 11
  • 1
  • 3
-1
votes
1 answer

Getting input from a content editable div in react

Change handler const contentref=useRef() const handleclick=()=>{ setContent(contentref.current.value) console.log(contentref.current.value) } Tag
Naveenkumar M
  • 616
  • 3
  • 17
-1
votes
2 answers

ReactDOM not rendering the simple h1 element

So I have been learning my first lecture on React, and playing around with my code to understand how it works, But In code-pen my code is running, but in VS code it's not. Here's the code:
Thelostcause
  • 113
  • 7
-1
votes
1 answer

I created a project with create-react-app. on my windows pc but when is try to run npm start on the command line it shows this error.please help me

Got an error on npm start npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the raber-react@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output…
-1
votes
1 answer

React has not rendered yet

I am new at this field. I would like to ask for help. It was supposed to load a pictures; however, instead of that it is saying that I have not rendered yet. Someone could help me? Or recommend website when I can lear more about it? Thank you in…
-1
votes
3 answers

how can i prevent todo app from creating blank task?

i am beginner for react and i have 3 questions 1)How can i prevent creating blank tasks(see attached image) 2)how to add strikethrough for checked tasks for UI? 3)why i'm getting this error Warning: Each child in a list should have a unique "key"…
Rookie
  • 1
  • 1
  • 4
-1
votes
2 answers

Simple React Component not rendering after Routing

I'm a beginner in React and I'm learning how to route. My page changes urls, but the view turns to a blank page. My index page is working fine. I don't have any console errors. In Router.js import React from "react"; import { BrowserRouter, …
-1
votes
2 answers

Hover over one element at the time with DOM-manipulation

When hovering over an li all of the li-elements turns into white. I only want the one li-element I am hovering on to turn into from text color black to white. What have I done wrong? slideArea.addEventListener("mouseover", function () { …
Eric Sand
  • 49
  • 3
-1
votes
1 answer

React: props. is not a function

I have an error calling my function addQuestion and I got the error: props.addQuestion is not a function I have two Components, CampaignMng witch contains QuestionsList component. My CampaignMng: export default function CampaignMng(props:…
Mselmi Ali
  • 1,139
  • 2
  • 18
  • 28
-1
votes
1 answer

Dynamically added script in body is executing before dynamically added script in head

I have an HTML page, which making get request to the react page hosted in other domain. Once, i get page response, i copy JS from head section of requested page to head section of my page and same for script available in body section. Requested page…
user1760384
  • 107
  • 2
  • 9
-1
votes
1 answer

How to call react particular component present in ReactDOM.render

I have 2 component to be rendered present in single div of myProject-init.js, 1 at a time. But both are getting called parallel. myProject-init.js file: ReactDOM.render(
in component1 in…
Sasa
  • 7
  • 1
  • 1
  • 5
-1
votes
2 answers

Issue with JSX HTMLAttribute setting style for div tag in reactjs react-bootstrap

i am facing issue with the setting style for html div attribute in reactjs without jsx. I am calculating height for the div from calculateAvailableHeight() so that div content is managed with overflow:auto. but unfortunately I cannot set style for…