CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Duyan Zhen
Duyan Zhen

Reputation: 41

why the function did not work in codesandbox with JSX

I want to change the color and the h1 text based on the time of the date, the similar code is working in W3 editor, but is not working in Codesandbox. Any help is super appreciated!

Codesandbox code and error

W3 editor

Upvotes: 0

Views: 263

Answers (4)

CodeDead
CodeDead

Reputation: 187

First of all, when using React and when you want to change the value of an element, you should make use variables and insert them when returning or rendering your component in order to make full use of the Virtual DOM.

For example:

import React from 'react';

const Example = () => {
    const hourOfDay = new Date().getHours();
    
    let greeting = 'Good evening';
    if (hourOfDay <= 12) {
        greeting = 'Good morning';
    } else if (hourOfDay <= 18) {
        greeting = 'Good afternoon';
    }

    return (
        <h1>{greeting}</h1>
    );
};

export default Example;

Notice how I'm using the greeting variable inside the <h1> element.

Do keep in mind that the example above is using function components: https://reactjs.org/docs/components-and-props.html

In order to change the style in React based projects, you can make use of the style attribute of elements when rendering or returning components/functions:

import React from 'react';

const Example = () => {
    const hourOfDay = new Date().getHours();

    let greeting = 'Good evening';
    let color = 'red';

    if (hourOfDay <= 12) {
        color = 'green';
        greeting = 'Good morning';
    } else if (hourOfDay <= 18) {
        color = 'blue';
        greeting = 'Good afternoon';
    }

    return (
        <h1 style={{color: color}}>{greeting}</h1>
    );
};

export default Example;

More information can be found here:
https://reactjs.org/docs/dom-elements.html#style

Please do take your time to read the React documentation:
https://reactjs.org/docs/getting-started.html#learn-react

Upvotes: 0

Ketan Ramteke
Ketan Ramteke

Reputation: 10675

As suggested be @Velrin, you have to use useRef hook for targeting individual dome elements.

You can modify the code like below to achieve the same result:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  myFunction = () => {
    const hour = new Date().getHours();
    if (hour <= 12) {
      return "Good Morning";
    } else if (hour >= 12 && hour <= 18) {
      return "Good Afternoon";
    } else {
      return "Good Evening";
    }
  };
  render() {
    return (
      <div>
        <h1 id="h1">{this.myFunction()}</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Working App Demo: Stackblitz

Upvotes: 0

zergski
zergski

Reputation: 833

It's actually simple...

const time = () => {
    // your if statements here.. return the result
    return '11am';
}

const App = props => {
    
   return (
      <h1>{ time }</h1>
   );
}

export default App;

Because React creates a Virtual DOM the vanilla getElementBy() methods are not used.

As you are doing your logic in the main component you can simply change a variable value and use that value directly in the html element.

Otherwise you can import the component and pass the value through props.

import ComponentName from 'path'

and in render

<ComponentName text={ time } />

and inside the component simply use the 'text' property in props

<h1>{ props.text }</h1>

Upvotes: 0

Velrin Black
Velrin Black

Reputation: 412

In React, HTML elements are rendered client-side, so at the moment, when the page loads, there aren't any elements. So that's why document.getElementById("h1") is null.

With React you can use useRef hook in order to access HTML element: https://reactjs.org/docs/hooks-reference.html#useref

Upvotes: 1

Related Questions