Setting initial state to null and passing file object to preview modal - reactjs

Question

I am creating a preview modal to view a specific image on click. My thought process is to have a state property set to null, on clicking the image I then set the state to the specific file and render the image path as the image source. However, Typescript does not like this and states Object is possibly null.
I tried adding selectedFile: Asset in my extended props but I am given an error in the parent component expecting it to pass the file down. I do not want it to behave this way.
I tried writing it as selectedFile: Asset<{}>() but Typescript complains that I'm using it as a type instead of a value.
import * as React from "react"
import { Company } from "data/companies"
import { Asset } from "data/companies"
import Modal from "components/Modal"
interface MediaLibraryProps {
company: Company
}
class MediaLibrary extends React.Component<MediaLibraryProps> {
state = {
mediaLibrary: [],
editModalIsOpen: false,
selectedFile: null
}
toggleEditModal = () => {
this.setState({ editModalIsOpen: !this.state.editModalIsOpen })
}
openEditModal = (file: Asset) => {
this.setState({
editModalIsOpen: true,
selectedFile: file
})
}
getMediaLibrary = async () => {
await fetch(
`${process.env.REACT_APP_SA_API_URL}/${this.props.company.id}/images`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
).then(blob => blob.json())
.then(function (data: any) {
return data.map((file: Asset) => Object.assign(file, {
assetId: file.assetId,
path: file.path
}))
}).then((data) => this.setState({ mediaLibrary: [...data] }))
}
render() {
const files = this.state.mediaLibrary.map((file: Asset) => (
<div key={file.assetId} onClick={() => this.openEditModal(file)}>
<div>
<img src={`${process.env.REACT_APP_SA_CDN_URL}${file.path}`} />
</div>
</div>
))
return (
<div>
<div>
<h2>Media Library</h2>
</div>
{files}
<hr />
<Modal isOpen={this.state.editModalIsOpen} toggleOpenness=
{this.toggleEditModal}>
<img
src={this.state.selectedFile.path}
onClick={this.toggleEditModal}
/>
</Modal>
</div>
)
}
}
export default MediaLibrary
I expect the file to be passed to the state and be given access to its properties to be used in my Modal.
Actual behaviour is that TypeScript does not like a state to be initialized as null.

Answer 1

I'm sure there is a cleaner way to do this but I fixed it by setting
state = {
selectedFile: {
path: ""
}
}
openEditModal = (file: Asset) => {
this.setState({
editModalIsOpen: true,
selectedFile: {
path: file.path
}
})
}