Updating the render form a function in React

Question

I'm ignorant towards how Reacts render works and i was wondering , how or if it possible to update a style element from a variable created in a function. See the following :

this is my function that's called in order to determine the amount of columns for the sytle elemnt "gridTemplateColumns".

 function getSize() {
        var number 10
        var ColumnNo= "";
        for (var i = 0; i < number; i++) {
            ColumnNo+= "auto ";

        }

    }'

And this is the Grid Container with the style inside:

<div className="grid-container" style={{ "gridTemplateColumns": styletest }}>

I know that it works when you load the page , but how do you update the render with this new variable ?

consider using state reactjs.org/docs/state-and-lifecycle.html — lomse
– lomse, Commented Nov 14, 2018 at 11:30

Morteza Akbari · Accepted Answer · 2018-11-14 12:54:38Z

1

You have to put the variable in the state of your component and update it with setState or pass it to the component using props and update the value from the parent component.

This way every time the variable changes, the render function will be called

edited Nov 14, 2018 at 12:54

answered Nov 14, 2018 at 12:26

Morteza Akbari

341 silver badge2 bronze badges

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

Collectives™ on Stack Overflow

Updating the render form a function in React

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