calculations inside a render function react js 1

calculations inside a render function react js

class Random extends React.Component {
  render() {
    // First, some logic that must happen
    // before rendering:
    const n = Math.floor(Math.random() * 10 + 1);
    // Next, a return statement
    // using that logic:
    return 

The number is {n}!

; } }

Here is what the above code is Doing:
1. The render() method is called every time that the output
of the component needs to be recalculated.
2. The render() method must return a value or a set of values
(most commonly expressed as a JSX expression).
3. The render() method will be called many times, each time
the “state” of the application changes.
4. The state of the application is the data, or the
information, that’s being displayed by the application.
5. The state of the application is stored in properties
and/or state.
6. When a component’s state changes, the component re-renders.
7. When a component re-renders, the render() method is called.
8. When the render() method is called, a description of
what the UI should look like is returned.
9. React takes that description and updates the UI to
match it.

Similar Posts