CODEWITHSUNDEEP
reactjs
Ishan Patel
Ishan Patel

Reputation: 6091

How to render text in component form <text /> in react?

I want to display text in the form of react component inside react app.

When I tried to render it, it gives me not defined error, which is understandable. 

import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
const Header = () => {
    return(
    <div className="header-wrapper">
            <p className="logo__tagline"> <text />  </p>
        <img className="App__logo" src={logo} alt="Name" />
    </div>
    )
};

export default Header;

Upvotes: 0

Views: 26183

Answers (1)

tygar
tygar

Reputation: 264

Not sure exactly what you are trying to do? But if i understand correct you could do like this:

In the text file:

import React, { Fragment } from 'react'; // So it doesn't create a unnecessary node element. **Only available in react 16+

export const Text = () => <Fragment>Your text here</Fragment>;

and then you can bring in the text element and use it in your code:

import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
import { Text } from './Text'

const Header = () => {
  return(
   <div className="header-wrapper">
      <p className="logo__tagline"> <Text />  </p>
      <img className="App__logo" src={logo} alt="Name" />
   </div>
  )
};

export default Header;

Maybe i have misunderstood the question but i don't know why you would want to do this.

Upvotes: 4

Related Questions