I'm trying to have the results from a onClick event render in a new page and window. I am having a couple issues.
I tried wrapping my rendering of the Pdfs component in a window.open function. This would be too easy and does not work at all. I tried adding the states that I needed to the history.push function
handleContract = (id) => {
API.openRow(id)
.then(res => {
const pdfs = res.data;
this.setState({pdfs});
this.props.history.push({
pathname: '/pdf',
state: { labels:this.state.labels,
contracts:this.state.contracts,
pdfs:this.state.pdfs }
})
})
.catch(err => console.log(err));
}
I get Cannot read property 'map' of undefined on the /pdf page
Here is where the OnClick event is happening in child component and contains the data needed for the /pdf page.
const SearchResults = props => (
<tbody>
{ props.contracts.map((contract, i) => (
<tr key={i} data-id={contract.Id}
onClick={() => {props.handleContract(contract.Fields.filter(field => field.DataField==="IDXT001").map(field => field.DataValue))}}
className="clickable-row"
target="_blank">{contract.Fields.map( docs =>
<td key={docs.Id}><span id={docs.DataField}>{docs.DataValue}</span></td>)}
</tr>))}
</tbody>
)
On the Parent page..
class SearchPage extends React.Component {
constructor(props) {
super(props);
this.state = {
labels: [],
contracts: [],
formValues:"",
pdfs:[],
id:"",
};
this.onClick = this.handleContract.bind(this);
}
<SearchResults
labels={this.state.labels}
contracts={this.state.contracts}
pdfs={this.state.pdfs}
handleContract={this.onClick}
/>
My app.js file
<BrowserRouter>
<div>
<Header />
<Route exact path="/" component={Search} />
<Route exact path='/pdf' component={Pdf} />
<Footer />
</div>
</BrowserRouter>
And my Pdf component..
const Pdfs = props => (
<div className="container">
<div className="row">
{props.pdfs.map(contract =>
<div className="col-sm-4" key={contract.Id}>
<div className="card scroll">
<div className="card-body">
<p><i className="fas fa-file-pdf fa-lg"></i> <a href=
{"http://api/document/" + contract.DocImage.sfScanIndex}
className="link"
target="_blank"
rel="noopener noreferrer"
>{contract.DocImage.sfFilename}</a></p>
<p>{contract.Fields.map(docs =>
<div><h6 className="card-title">{docs.DisplayName}:</h6>
<p className="card-text">{docs.DataValue}</p>
<hr/>
</div>)}
</p>
</div>
</div>
</div>)}
</div>
)
Here is a console log of the props in pdfs after I click the tabel row...
{match: {…}, location: {…}, history: {…}, staticContext: undefined}
history: {length: 36, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
location:
hash: ""
key: "f8b43j"
pathname: "/pdf"
search: ""
state:
contracts: [{…}]
labels: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
pdfs: Array(7)
0: {Id: 0, Fields: Array(12), DocImage: {…}}
1: {Id: 1, Fields: Array(12), DocImage: {…}}
2: {Id: 2, Fields: Array(12), DocImage: {…}}
3: {Id: 3, Fields: Array(12), DocImage: {…}}
4: {Id: 4, Fields: Array(12), DocImage: {…}}
5: {Id: 5, Fields: Array(12), DocImage: {…}}
6: {Id: 6, Fields: Array(12), DocImage: {…}}
length: 7
__proto__: Array(0)
__proto__: Object
__proto__: Object
match: {path: "/pdf", url: "/pdf", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object
I would like the /pdf page to also open in a separate window. To allow the "/" page to remain the same. I tried adding a target="_blank" to the row that is being clicked.
The prop pdfs
exits inside props.location.state.pdfs
. Either replace props.pdfs.map
with props.location.state.pdfs
in Pdfs component or extract pass only pdfs as prop to Pdfs component