Adjust the color based on the value using JavaScript

Question

Adjust the color based on the value using JavaScript

I have a React component where I need to change the text color based on the value passed as props. Here is my code:



const ProductCard = (props) => {
    const classes = useStyles();

    useEffect(() => {
        const category = document.getElementById('category');

        if(props.category === "youtube"){
            category.style.color="#DC143C";
        }
        if(props.category === "blog"){
            category.style.color="#00FFFF";
        }
        if(props.category === "instagram"){
           category.style.color="#FF88FF";
        }
        if(props.category === "twitter"){
            category.style.color="#3366FF";
        }
    }, []);

    return (
        <Card className={classes.root}>
            <CardContent className={classes.content}>
                <Typography id="category"　className={classes.category} component="p">
                    {props.category}
                </Typography>
            </CardContent>
        </Card>
    )
}

export default ProductCard

Although this code partially works, only the first element's color gets changed, not the others. What could be causing this issue?

javascript css reactjs

Answer 1

Answer №1

Your current code is designed to only execute when the component mounts with an empty array dependency, meaning that any changes to props will not be reflected. This could be the root cause of the issue you're facing.

It might be beneficial to simplify your code by avoiding direct manipulation of the DOM. One alternative approach could be to create a dictionary to apply styles to your elements, like demonstrated below:


    const colorPalette = {
      youtube: "#DC143C", 
      blog: "#00FFFF", 
      instagram: "#FF88FF", 
      twitter: "#3366FF", 
    }

    const ProductCard = ({ category }) => {
      const classes = useStyles();
  
      return (
          <Card className={classes.root}>
              <CardContent className={classes.content}>
                  <Typography id="category" style={{ color: colorPalette[category] }}　className={classes.category} component="p">
                      {category}
                  </Typography>
              </CardContent>
          </Card>
      )
  }
  
  export default ProductCard

Answer 2

Your current code is designed to only execute when the component mounts with an empty array dependency, meaning that any changes to props will not be reflected. This could be the root cause of the issue you're facing.

It might be beneficial to simplify your code by avoiding direct manipulation of the DOM. One alternative approach could be to create a dictionary to apply styles to your elements, like demonstrated below:


    const colorPalette = {
      youtube: "#DC143C", 
      blog: "#00FFFF", 
      instagram: "#FF88FF", 
      twitter: "#3366FF", 
    }

    const ProductCard = ({ category }) => {
      const classes = useStyles();
  
      return (
          <Card className={classes.root}>
              <CardContent className={classes.content}>
                  <Typography id="category" style={{ color: colorPalette[category] }}　className={classes.category} component="p">
                      {category}
                  </Typography>
              </CardContent>
          </Card>
      )
  }
  
  export default ProductCard

Answer 3

Answer №2

It is recommended to refrain from querying the DOM within a React application. Instead, consider creating state to manage classes or styles and passing them to components.

Additionally, removing an empty array from useEffect may improve performance and functionality.

Answer 4

It is recommended to refrain from querying the DOM within a React application. Instead, consider creating state to manage classes or styles and passing them to components.

Additionally, removing an empty array from useEffect may improve performance and functionality.

Answer 5

Answer №3

When you use getElementById to select an element, it will only return one element.

const category = document.getElementById('category'); // this line here

This is because IDs are meant to be unique. There should only be one element with the ID category on the page. So when you modify the style of container, only that specific element gets affected.

Furthermore, IDs are not restricted to a particular component scope. Therefore, if there are multiple instances of the ProductCard component, calling getElementById will always refer to the category of the first ProductCard component.

Possible Solutions

These solutions may vary based on your components and setup, but at least one of them should work for your case.

Utilize a color prop

If your Typography component supports a color or style prop, utilize that instead. By doing so, you are explicitly specifying the color for a specific component in React.

const colors = {
    youtube: "#DC143C", 
    blog: "#00FFFF", 
    instagram: "#FF88FF", 
    twitter: "#3366FF", 
}

const ProductCard = (props) => {
    const classes = useStyles();

    return (
        <Card className={classes.root}>
            <CardContent className={classes.content}>
                <Typography id="category"　className={classes.category} component="p" style={{ color: colors[props.category] }}>
                    {props.category}
                </Typography>
            </CardContent>
        </Card>
    )
}

export default ProductCard

Introduce a wrapper component

You might consider enclosing just the typography element within a div and setting the text color through this approach. Although not the most optimal solution, it can still serve the purpose.

const colors = {
    youtube: "#DC143C", 
    blog: "#00FFFF", 
    instagram: "#FF88FF", 
    twitter: "#3366FF", 
}

const ProductCard = (props) => {
    const classes = useStyles();

    return (
        <Card className={classes.root}>
            <CardContent className={classes.content}>
                <div style={{ color: colors[props.category] }}>
                    <Typography id="category"　className={classes.category} component="p" style={{ color: colors[props.category] }}>
                        {props.category}
                    </Typography>
                </div>
            </CardContent>
        </Card>
    )
}

export default ProductCard

Answer 6

When you use getElementById to select an element, it will only return one element.

const category = document.getElementById('category'); // this line here

This is because IDs are meant to be unique. There should only be one element with the ID category on the page. So when you modify the style of container, only that specific element gets affected.

Furthermore, IDs are not restricted to a particular component scope. Therefore, if there are multiple instances of the ProductCard component, calling getElementById will always refer to the category of the first ProductCard component.

Possible Solutions

These solutions may vary based on your components and setup, but at least one of them should work for your case.

Utilize a color prop

If your Typography component supports a color or style prop, utilize that instead. By doing so, you are explicitly specifying the color for a specific component in React.

const colors = {
    youtube: "#DC143C", 
    blog: "#00FFFF", 
    instagram: "#FF88FF", 
    twitter: "#3366FF", 
}

const ProductCard = (props) => {
    const classes = useStyles();

    return (
        <Card className={classes.root}>
            <CardContent className={classes.content}>
                <Typography id="category"　className={classes.category} component="p" style={{ color: colors[props.category] }}>
                    {props.category}
                </Typography>
            </CardContent>
        </Card>
    )
}

export default ProductCard

Introduce a wrapper component

You might consider enclosing just the typography element within a div and setting the text color through this approach. Although not the most optimal solution, it can still serve the purpose.

const colors = {
    youtube: "#DC143C", 
    blog: "#00FFFF", 
    instagram: "#FF88FF", 
    twitter: "#3366FF", 
}

const ProductCard = (props) => {
    const classes = useStyles();

    return (
        <Card className={classes.root}>
            <CardContent className={classes.content}>
                <div style={{ color: colors[props.category] }}>
                    <Typography id="category"　className={classes.category} component="p" style={{ color: colors[props.category] }}>
                        {props.category}
                    </Typography>
                </div>
            </CardContent>
        </Card>
    )
}

export default ProductCard

Adjust the color based on the value using JavaScript

Answer №1

Answer №2

Answer №3

Possible Solutions

Utilize a color prop

Introduce a wrapper component

Similar questions

A step-by-step guide on retrieving a value from a DateTime picker in a React application

Encountering a Stripe Axios error code due to a faulty response while sending a post

Struggling with a CSS problem involving the UL > LI > LI structure

prompting the JavaScript hangman game to identify the letters in the "selected word"

Maintaining the integrity of a list within a for loop

Issue with creating req.session in Node.js client-sessions library

What is the best way to use a computed property as a style value for a component in Vue.js?

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

problem of keeping behat/selenium browser open after execution

When the mouse is clicked, rotate the object along its axis using OBJ Loader in THREE.js

Tips on incorporating a callback function within the setState function

Issue with Yup and Formik not validating checkboxes as expected

AngularJS routing with html5mode causing 404 error when using htaccess

Expanding a Landy react app to smoothly transition to a different page with the Router model

Angular components are not properly adhering to the specified height and width dimensions for child elements

Annoying div unexpectedly wrapping content after using appendTo

The Vue.js 2 router is exclusively pulling components from the navigation bar, rather than directly from the URL

Is it possible to replace Material UI theme with a custom JSS theme?

Angular - No redirection occurs with a 303 response

css malfunctioning user interface