Exporting values from a Component in React

Question

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?

Can you explain in more detail? You want a header component that will display a value that is passed into it? — finalfreq
– finalfreq, Commented Feb 9, 2017 at 22:14
should I be passing in the props value into the component? Not the other way around? — pcproff
– pcproff, Commented Feb 9, 2017 at 22:38

finalfreq · Accepted Answer · 2017-02-09 22:46:14Z

1

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

answered Feb 9, 2017 at 22:46

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Exporting values from a Component in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related