How do I add css variable into a reactJS component that is written with es6?

Question

My question really simple you notice how I have a css variable here that is called frameStyle.

var Frame = React.createClass({

    getInitialState: function() {
    return {hover: false}
    },

    toggleHover: function(e) {
        this.setState({
            hover: !this.state.hover
        })
    },

    render: function() {
        if (this.state.hover){
            linkStyle = "blue";
        }else{
            linkStyle = "red";
        }

        var frameStyle = {
            width: 100,
            height: 100,
            backgroundColor: {this.props.linkStyle}
        };

        return (
            <div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}>
            </div>
        );
    }
});

How would I add something similar if I was to write a component using ES6? If someone could point to the right direction I would really appreciate it!

Akash Bhandwalkar · Accepted Answer · 2017-10-01 23:11:21Z

1

If I have understood your question you want to create component using extending class in react ja.


import React from ‘react’;
class Frame extends React.component{

    constructor(props){
       super(props);
       this.props = props;
       this.state = { hover: false}
    },

    toggleHover = (e) =>{
        this.setState({
            hover: !this.state.hover
        })
    },

    render() {
        if (this.state.hover){
            linkStyle = "blue";
        }else{
            linkStyle = "red";
        }

        var frameStyle = {
            width: 100,
            height: 100,
            backgroundColor: {this.props.linkStyle}
        };

        return (
            <div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}>
            </div>
        );
    }
}

answered Oct 1, 2017 at 23:11

Akash Bhandwalkar

8915 silver badges19 bronze badges

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

1 Comment

user7452246 Over a year ago

Yes you are correct! I am learning how to write in ReactJS and would like to learn how to create something like the frameStyle variable inside my render component but with ES6.

Collectives™ on Stack Overflow

How do I add css variable into a reactJS component that is written with es6?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related