React inline style with a variable from a function

Question

I am trying to display the product getting the size it should be from a Json database. I am new to react so have tried a few ways and this is what I have been able to do. I tried making a function (FontSize) that creates a variable (percentage) with the value I want before and then tried calling the function in the render in the tag with the product. I am getting no errors but the size of the paragraph tag is not changing.

This is my component.

import React, { Component } from 'react';
import { Loading } from './LoadingComponent';
const API = 'http://localhost:3000/products';


class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      isLoading: false,
      error: null,
    };
  }

componentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then(data => this.setState({ products: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }






FontSize = () => {

    const { products } = this.state;
    var percentage = products.size + 'px';
    return percentage;
  }


  render() {

  const Prods = () => {
    return (
    <div>
       <div className="row">
           <button onClick={this.sortPrice}>sort by price lower to higher</button>
           <button onClick={this.sortSize}>sort by size small to big</button>
           <button onClick={this.sortId}>sort by Id</button>  
        </div>
            {products.map(product =>
            <div className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize : this.FontSize()}} > {product.face}</p>
                </div>

                <div className="col-3">
                  <p>Date: {product.date} {this.time_ago}</p>
                </div>
            </div> 
            )}
            <p>"~END OF CATALOG~"</p>
      </div>
    );
  };

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

export default Products;

What I get in the console using console.log(products)

A few suggestions: Try using the web inspector to see exactly what is being rendered inside the style attribute. You can also try hard-coding a font size to see if that works, then work backward from there. E.g.: style={{fontSize : '72px'}} — jknotek
– jknotek, Commented Nov 17, 2019 at 19:00
I used the inspector and the style attribute is not been rendered, but if I hard-code it in style={{fontSize : '72px'}} the style attribute appears in the paragraph tag — Natasha
– Natasha, Commented Nov 17, 2019 at 19:08
Then it must be an issue with your FontSize function. Try using console.log(products) within the FontSize function, and see what you get. Maybe products doesn't have a size value set? — jknotek
– jknotek, Commented Nov 17, 2019 at 19:16
I added a picture in my question with what I get in the console. My products has a size value. — Natasha
– Natasha, Commented Nov 17, 2019 at 19:22
I love you!! this worked but put directly in paragraph tag <p style={{fontSize: ${product.size}px}} > {product.face}</p> — Natasha
– Natasha, Commented Nov 17, 2019 at 19:55

Cenco · Accepted Answer · 2020-05-29 13:52:07Z

4

I think you need quotes around your style value to work properly.

With concatenation it would look like this for Example:

style={{gridTemplateRows: "repeat(" + artist.gallery_images.length + ", 100px)"}}

Another general example from React:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

answered May 29, 2020 at 13:52

Cenco

913 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React inline style with a variable from a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related