0

I want create a component which be a DIV with a custom style: background color blue. After that, I want instance it and add text as children. I am trying do it so:

WRAPPER: 

import React from 'react';

export default class Wrapper extends React.Component {
constructor() {
    super();
}

render() {
    const { children, ...props } = this.props;
    return (
        <div style="background-color: blue" {...props}>
            {children}
        </div>
    );
}
}

and I am instancing it like so:

INSTANCE: 

import wrapper from './../../components/wrapper.jsx';

render() {
    return (
        <wrapper>hi world</wrapper>
    );
}

But it is not working. How could I do this?. Thank you.

JuMoGar
  • 1,740
  • 2
  • 19
  • 46

1 Answers1

1

Use capitalized "Wrapper" in JSX:

import Wrapper from './../../components/wrapper.jsx';

render() {
    return (
        <Wrapper>hi world</Wrapper>
    );
}

As it described by @Quentin:

From some react release notes

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

Community
  • 1
  • 1
Philip Tzou
  • 5,926
  • 2
  • 18
  • 27