top of page
Logo der Online Agentur mdwp

Render()

Render() is a core method in a React component which outputs HTML to the Document Object Model (DOM). When invoked, render() should examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Portals, String and numbers, Booleans or null.

Essentially, the render() method is tasked with specifying what will be displayed on the screen when a component's state changes. After every change in the state or props, the render() method is called automatically, inferring the needed changes to the output and updating the user interface accordingly.

It's important to note that the render() function should remain pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.

Here's a basic code example of a render function:

```jsx
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'John Doe'
};
}

render() {
return (
<div>
<h1>Hello, {this.state.name}</h1>
</div>
);
}
}
```

In this example, the render() function is returning JSX (a syntax extension to JavaScript used with React to describe what the UI should look like). The returned JSX is then rendered to the DOM. The `{this.state.name}` part is an expression that gets the current state's `name` property and displays it in an `<h1>` element.

bottom of page