Styjun

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