I'm rendering a react component like this
export class MyClass {
render(state) {
ReactDOM.render(<Dashboard {...state} />, document.getElementById("root"));
}
}
The render function is called externally by the environment my class is injected in. Although this works fine, the problem is that the environment can call that render method again with an other state object. How can I pass that data to that rendered Dashboard component?
I tried to run ReactDOM.render again, but then nothing happens. The only solution I found was to remove that root element, insert it again and then run ReactDOM.render again, but that doesn't really sound like a solid solution to this trivial problem. Any suggestions how to do this?
Related
I have created a sample test app as below
import React from 'react';
class App extends React.Component {
render() {
const SampleBtn = (props) => {
console.log('button rendered');
return <button>test</button>;
};
return (
<div className="App">
<SampleBtn />
</div>
);
}
}
export default App;
When I run the above app, console.log('Button rendered') is called twice. I tried to remove <React.StrictMode> also, it is called twice and sometimes it multiplies. How to resolve this and can I know the reason behind this?
I have used HTML button and create a stackblitz code as below, even then I am seeing the logging twice. Please see the url below
https://react-xd9pzh.stackblitz.io
Maybe add a render method to the class and move the CustomButton outside the class, a working code will help you to find the issue.
Edit: first code example was unclear to me, like others said, probably it's StrictMode. Keep in mind that it will run only in the development environment. For a quick check on your local machine, for example, if you're using create-react-app you can simply run the build command and then serve the app in your browser to verify if you get a double console.log with the prod build.
I want to destroy the root Preact DOM node. I initially render my component as follows:
import { h, render } from 'preact';
import App from "./components/App";
render(<App />, document.querySelector("#app");
How do I destroy App? Do I simply unmount the #app DOM node, or does Preact offer a method similar to React's unmountComponentAtNode() method?
Disclaimer: I work on preact.
Any rendered preact app can be easily destroyed by passing null to render:
render(null, document.querySelector("#app"));
We don't need any special functions to do that and have chosen to keep a small API surface area. The implementation for unmountComponentAtNode in preact-compat does literally just call render with null:
// Excerpt from compat for Preact X
function unmountComponentAtNode(container) {
if (container._prevVNode!=null) {
render(null, container);
return true;
}
return false;
}
There is no method like unmountComponentAtNode() without preact-compat.
A workaround is to use the third argument of the render() method to replace the component you want to unnmount by '' or null like suggested here :
https://github.com/developit/preact/issues/53#issuecomment-184868295
I want to know that, how to access selectColumns menthod inside react-handsontable. I already tried to assign refs to hot table component <HotTable refs="hot"/> but still i cant access selectColumns method.
Thanks for reading this question.
#Sagar Any other approaches? It's not so convenient if we include HotTable in other components and can't render it in such way.
If we speak about this rows from example
const exampleComponent = ReactDOM.render(
<ExampleComponent />, document.getElementById('example')
);
window.hotInstance = exampleComponent.refs.hot.hotInstance;
it's okay, when we render it as a separate component. But if I import it in App component and then render App component via ReactDom.render, I have no refs, just empty object
I just started out trying mobx-react using stores, and want to use a store plus a single observable, but can't even get this to work.
With #observer, I get the error Uncaught TypeError: Cannot assign to read only property 'render' of object '#<ProxyComponent>'.
Without it, the value becomes 1.
I'm not sure what's going wrong here, any ideas?
import {observable} from 'mobx'
import {inject, observer} from 'mobx-react'
class AppStore {
#observable value = 1;
}
#inject('store') #observer
class App extends React.Component {
render(){
const {store} = this.props
return (
<div>
{store.value}
</div>
)
}
}
const render = (Component) => {
const appStore = new AppStore()
ReactDOM.render(
<AppContainer>
<Provider store={appStore}>
<Component/>
</Provider>
</AppContainer>,
document.getElementById('root'),
)
}
render(App)
Your code is bit unclear, like from where are you importing Provider and ReactDOM.And also since render is a function used by ReactDOM so the render() function you have defined might conflict with the built in render() function.
And also here it is explained
In general there are three ways in which you can pass stores in MobX
1) Explicitly via props. Easy to test and clear to follow, but can become
clumpsy when you have deeply nested structures or many stores (you can
solve the latter by having a store for stores)
2) Import stores in the
components directly and just use them :) It's the MVP of passing
stores around, but stand alone testing of components becomes tricky
quickly as you have to make sure your global stores are in the right
state first
3) Pass stores around via React's context mechanism. Redux's
Provider uses that, as does the mobx-connect package. Context is
passed implicitly and deep component can extract data out of the
context, but it is still easy to test as you only have to make sure
you set up some context before testing the component.
In your case you are using the 3rd point.So I have created a jsfiddle here,
where the store is passed as props as in point 1.
Turns out this was a configuration (webpack hot loader) issue, and not an issue of the code itself (which runs under a jsfiddle).
Adding 'react-hot-loader/babel' to 'plugins' in webpack's 'babel-loader' appears to work.
I have 4 react components header,modal,container,index. In index.js I'm rendering all the components. Now, I have one problem My HTMl page is using one js file(home.js). It is executing the before the DOM loads. So, it is not getting any properties of the DOM so it is failing. So, How I can the execute that js file once the DOM is loaded?
Wrap your home.js code with a global function and call to that function in componentDidMount life cycle method of your root React component.
So your home.js file will look something like this.
window.executeHome = function() {
// your curren home.js code goes here
}
and inside the componentDidMount method of your root React component, you can call above method to make sure that you are running home.js code after loading the React components.
componentDidMount() {
window.executeHome();
}
However, consider this as a workaround and it's usually not something recommended. The better approach would be writing your home.js code also inside a React component.
please try
componentDidMount() {
}
componentDidMount() automatically called after render() method.