CODEWITHSUNDEEP
react-native
SkyeBoniwell
SkyeBoniwell

Reputation: 7112

passing a prop from index into header component

I'm following a udemy tutorial on react-native.

I'm trying to pass a prop from my index.js into my header.js. The header should say, "Albums". But is is always showing up blank.

If I remove {props.headerText} from header.js and replace it with

"Albums"

then it works. But I'm trying to make the component reusable per the tutorial instructions.

note: I'm using Create React Native App and this is on an android emulator. App.js

import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';

export default class App extends React.Component {
  render() {
    return (
      <Header />
    );
  }
}

index.js

import React from 'react';
import { Text, AppRegistry } from 'react-native';
import Header from './src/components/header';

const App = () => (
    <Header headerText={'Albums'} />
);

AppRegistry.registerComponent('albums', () => App);

header.js

import React from 'react';
import { Text, View } from 'react-native';

const Header = (props) => {
    const { textStyle, viewStyle } = styles;

    return (
        <View style={viewStyle}>
            <Text style={textStyle}>{props.headerText}</Text>
        </View>
    );
};

const styles = {
    viewStyle: {
        justifyContent: 'center'
    },
    headerStyle: {
        fontSize: 20
    }
  };

  export default Header;

Am I missing anything? I've been over and over each file line by line and I can't find any issues.

Thanks!

Upvotes: 1

Views: 1732

Answers (1)

ozer
ozer

Reputation: 552

I would suggest you 

const Header = ({props}) => {
    const { textStyle, viewStyle } = styles;

    return (
        <View style={viewStyle}>
            <Text style={textStyle}>{props.headerText}</Text>
        </View>
    );
};

And to pass props ;

const App = () => (
    <Header props={someProps} />
);

Upvotes: 1

Related Questions