Make variable available in render function | react js

Question

Is it possible to set the data for companyLogo as a const without saving to state? And have that variable available within the render function to pass as props to a component as you see below.

The data for companyLogo is only available once a user logs in so please note the use of the componentDidMount function.

I'm sure there is a more elegant way of doing this, just unsure how.

@connect((store) => {
    return {
        user: store.user
    }
})

export default class Header extends Component {
    constructor() {
        super();

        this.state = {
            companyLogo: null
        }
    }

    componentDidMount() {
        //Get company logo and store to pass as props
        this.setState({
            companyLogo: this.props.user.user.groups[0].logoUrl
        })
    }

  render() {
    return (
        <div className="header-container">
            <Row className="header-body">
                <Branding companyLogo={this.state.companyLogo} />
                <AskQuestion />
                <Navigation />
                <Profile />
            </Row>
        </div>
    )
  }
}

<Branding companyLogo={this.props.user.user.groups[0].logoUrl} /> ? — Serge K.
– Serge K., Commented Jun 14, 2017 at 9:05
Unfortunately not, please not the componentDidMount as the data is not available on load. — Filth
– Filth, Commented Jun 14, 2017 at 9:07

Grand Julivan · Accepted Answer · 2017-06-14 09:07:54Z

2

what is the value props of company logo before the component mount? you could add a validation on render instead.

{
   this.props.user.user.groups && this.props.user.user.groups[0].logoUrl &&
  <Branding companyLogo={this.props.user.user.groups[0].logoUrl} />
}

so the render for company logo only occurs when the value is available.

answered Jun 14, 2017 at 9:07

Grand Julivan

2791 gold badge2 silver badges13 bronze badges

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

4 Comments

Filth Over a year ago

The value of props company logo is only available after the component has mounted hence componentDidMount. Is there anything wrong with the way I'm doing currently? I just thought there may be a better way.

Grand Julivan Over a year ago

if the company logo is not changing on the component, no need to put it on component's state. just pass it directly to the child. do the validation on render. that's how I would do it.

Filth Over a year ago

Please see the edit to your question - this is my solution code. Many thanks!

Filth Over a year ago

export default class Header extends Component { render() { const companyLogo = this.props.user.user.groups[0].logoUrl; return ( <div className="header-container"> <Row className="header-body"> {companyLogo && <Branding companyLogo={companyLogo} /> } <AskQuestion /> <Navigation /> <Profile /> </Row> </div> ) } }

bhaskar sharma · Accepted Answer · 2017-06-14 17:46:14Z

1

Preparing state for component from props is not advisable, for instance, if your user logo changes in store, it will not update the logo in your component. If you really want to use props in state, you will have to use componentWillRecieveProps to update State when user logo change in store, so that component can update accordingly, or directly use props as mentioned in other comment

p.s. sorry my reputation is too low to comment

answered Jun 14, 2017 at 17:46

bhaskar sharma

964 bronze badges

3 Comments

Filth Over a year ago

Thank you for your answer. My solution code is in the above comments - would you have any advisories for that approach?

bhaskar sharma Over a year ago

in your solution, you are not checking for const companyLogo = this.props.user.user.groups[0].logoUrl;

bhaskar sharma Over a year ago

if his.props.user.user is undefined, javascript will throw an error, so , you can parse keys safely using if conditions

Collectives™ on Stack Overflow

Make variable available in render function | react js

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related