score:19
you can't define a constant in the middle of a class, that's invalid syntax. class bodies, by definition1, can only contain method definitions, static method definitions, and empty statements (;
)2. define the divstyle
inside a method:
class holamundo extends react.component {
render() {
const divstyle = {
color: 'blue',
};
return (
<div classname="container" style={divstyle}>
<h1>hola {this.props.name}</h1>
</div>
);
}
}
1per the ecmascript 2015 language specification, section 14.5 - class definitions
2babel currently supports class properties (with plugins). you can also assign an instance variable through the constructor, with this.style = { ... }
and access it anywhere in the class with this.style
.
score:4
at the bottom of the page (below the class declaration) you can define a styles object:
const styles = {
examplestyle: {
backgroundcolor: 'red',
}
};
then pass it into a components style prop:
style={styles.examplestyle}
i prefer doing it like this as you can then keep all your styles for the component in one object rather than having a styles object for each of your methods in the class.
Source: stackoverflow.com
Related Query
- Adding style stored in a variable inside React class
- Adding style attributes to a css class dynamically in react app
- How to save a class inside a variable with setState with React
- How to test the style inside the CSS class for React component using Jest and Enzyme?
- How to put raw html stored in variable inside a react component
- React - adding class to children components
- Adding a new line in a JSX string inside a paragraph - React
- Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui
- Adding React inside a Django project
- Unable to use Arrow functions inside React component class
- ReactJS - How to change style and class of react component?
- React JS toggle/ adding a class on hover
- React - useContext inside class
- Dynamically adding active class to multi level sidebar menu in REACT JS
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- export variable from class React
- function or variable outside of a class in react
- Adding style attribute in react
- React Native - Accessing static variable on same class
- React adding css class without rerender
- use of variable inside render function of react component
- Use css/scss variable in React component as inline style
- How can I adding style to react autocomplete in react js
- How to use an ejs variable inside a react render function?
- react jsx inline style not rendering when populated from a variable
- How to use React Context inside function of Class component
- Inserting html inside string variable used in React component
- Adding class to React Component after a certain amount of time
- Using a React hook inside a class component
- Adding a key-value pair to an object inside loop using React useState hook
More Query from same tag
- Reduce array differentiating by category in reactjs
- react-router v4 dispatch redux action on page change
- What is the default value of React.PropTypes.func
- Change Material UI label to white on switch not working
- TypeError: Cannot read property 'value' of undefined on components (ReactJS forms)
- Using '+' as an actual + operator when passed as string - React
- React & Redux: Dispatching action not working
- React threejs merge two tubes to create a tee-piece with CSG not working as expected
- React JS - passing info from object and array as props to child component
- REACT: Rendering a "please fill out this field" warning On Hover
- React Jest to match snapshot, crash when testing component with child components
- How to create dynamic Header from API React table
- how to prevent children component re render, when state/props parent component changing?
- how to pass urls, params, headers to call() in redux-saga?
- React - Passing state to another component - Component accessed via URL
- Render component with async ComponentDidMount
- Armchart doesn't show the line on zoom
- ReactJS deploy app error Cannot copy to clipboard: Command failed: xsel --clipboard --input
- How to use common component between Create React APP(CRA) and Gatsby where component consists of <Link> tag?
- Disconnect webcam on click after accessing it through .getUserMedia in ReactJS
- Position resets to 0 while using PanGestureHandler from react-native-gesture-handler
- Destructure using rest parameters
- child Component doesn't re render after parent passes changed state
- Selecting all text inside react-bootstrap-typeahead on inner input focus
- Bootstrap installed in ReactJS app but no styling
- Cancel Previous request(if there are any) before making another while using debouncing in react
- How to list all suggestions and filtered suggestions based on user input using reactjs?
- How to add 2 keys from useState using mapping React?
- Select Inner component in a React Component
- Updating @material-ui/core to version 4.2.0 causes react hook errors