CODEWITHSUNDEEP
reactjs
HarshSharma
HarshSharma

Reputation: 660

React Props not displaying data on UI

I am learning React

While working on Props, I have created a component and using that component in my index.jsx. But the values passed through props are not displayed on the UI.

usingprops.jsx

import React from 'react';
class UsingProps extends React.Component {
    render() {
        return (
            <div>
                <p>{this.props.headerProp}</p>
                <p>{this.props.contentProp}</p>
            </div>
        );
    }
}

export default UsingProps;

index.jsx

import React from 'react';
import UsingProps from './Props/UsingProps.jsx';

class App extends React.Component {
    render() {
        return (
            <div>
                <UsingProps />
            </div>
        );
    }
}

const myElement = <App headerProp="Header from props!!!" contentProp="Content from props!!!" />;
ReactDOM.render(myElement, document.getElementById('root'));

export default App;

Upvotes: 0

Views: 144

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10686

You are putting the headerProp on the App component, not the UsingProps component, which is where you are trying to access it. You need to revise it to this:

class App extends React.Component {
    render() {
        return (
            <div>
                <UsingProps headerProp="Header from props!!!" contentProp="Content from props!!!" />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Upvotes: 2

Related Questions