CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
user3868051
user3868051

Reputation: 1249

passing a output of a function as a parameter to react component in redux

I am quite new to react-redux. So I need some help trying to understand the syntax here...

I have a file: SampleA.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchNames, fetchDownloadLink } from '../../actions/actions'
import SampleChild from '../ui/SampleChild'

class SampleParent extends Component {
constructor(props) {
super(props) ;
}

componentDidMount() {
const { dispatch } = this.props
dispatch(fetchNames());
}

render() {
return(<div><ul id="myUL">{this.props.reports.map((report) => (
                <li>
                    <SampleChild
                        key={report.id}
                        label={report.label}
                        uri={fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")}
                    />
                </li>))}</ul></div>)}
}

function mapStateToProps(state) {
const { reports } = state
return {
reports
}
}

export default connect(mapStateToProps)(ReportsApp)

I need to pass the output of the function 'fetchDownloadLink' to the SampleChild component. I am not sure how to go about that. 'fetchDownloadLink' returns a url string.

Any thoughts please... Thank you in advance..

Upvotes: 0

Views: 377

Answers (1)

Anurag Awasthi
Anurag Awasthi

Reputation: 6233

If you want to pass the result of function, so call the function and save the result in local variable,

render() {
const uri = fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")
return(<div><ul id="myUL">{this.props.reports.map((report) => (
                <li>
                    <SampleChild
                        key={report.id}
                        label={report.label}
                        uri={uri}
                    />
                </li>))}</ul></div>)}
}

To calculate different uri inside map, do like this,

render() {

return(<div><ul id="myUL">
            {this.props.reports.map((report) => {
                const uri = fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")
                return <li>
                    <SampleChild
                        key={report.id}
                        label={report.label}
                        uri={uri}
                    />
                </li>})}</ul></div>)}
}

Upvotes: 1

Related Questions