CODEWITHSUNDEEP
javascriptreactjs
pcproff
pcproff

Reputation: 622

Exporting values from a Component in React

I have a simple header component I want to send out some values in.Although, it may be a little too simple to warrant a component I am trying to figure out how to export the value out of the component. This is what I have so far.

import React from "react";
const welcome = { title: "Welcome"}
export default ()=> (
  <h1 className="App-header">{{welcome.title}}</h1>
)

Any ideas?

Upvotes: 0

Views: 81

Answers (1)

finalfreq
finalfreq

Reputation: 6980

The great thing about React is that it is all about composability: being able to create a base component that given x props will product the appropriate ui based on those props.

If I were to build a header component I would expect I may have many headers in my app and each with its own content. 

export default (props) => (
  <h1 className="App-header">{props.title}</h1>
)

and then when I use it:

import Header from 'header';

<Header title="my title" />

and then you will be able to have the same base configuration and only have to pass in a title through props to be able to use across your app.

great article from the facebook react guides on composability https://facebook.github.io/react/docs/composition-vs-inheritance.html

Upvotes: 1

Related Questions