Pass state as prop to child component - reactjs

Question

As the title says, how can I pass state data to a new component. I have a parent class that loads some data from an IndexedDb.
I will pass the information of "image" as prop to my child component.
class Parent extends Component<Props> {
constructor(props: Props) {
super(props);
// map state to json structure
this.state = {
data: {
image: ''
[...]
};
}
public componentWillMount() {
const dataProvider = new DataProvider(DataProvider.DBNAME);
dataProvider.loadData('somedoc')
.then((data: object) => this.setState({data}));
}
public render() {
const {data}: any = this.stat
return (<Child image={data.image} />);
}}
In my child Component I will use the prop to make a new request for retrieving the image. The problem is that the prop in the componentWillMount method is empty.
interface IImageProps {
image: string;
}
Class Child extends Component<IImageProps> {
constructor(props: IImageProps) {
super(props);
}
public componentWillMount() {
console.log("image", this.props.image); // <-- it's allways empty
// do some async stuff
}
public render() {
console.log("image", this.props.image); // <-- the image information is shown
}}
What did I miss, cause in the render methode I can use the prop? How do I pass the variables correctly?

Answer 1

Thank you for helping. I solved my problem with the componentDidUpdate() method. As describe in the documentation https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/postrender_with_componentdidupdate.html
For now my final solution:
componentDidUpdate() {
const imageName: string = this.props.imageName;
const dataProvider = new DataProvider(DataProvider.DBNAME);
dataProvider.loadImage('somedoc', imageName)
.then((response: any) => {
let {imageDataUrl}: any = this.state;
if (imageDataUrl !== response) {
imageDataUrl = response;
this.setState({imageDataUrl});
}
})
.catch((error: any) => console.log(error));
}

Answer 2

Since your loadData function is asynchronous, data.image will be an empty string when the Child component is mounted.
You could e.g. wait with the rendering of the Child component until the request has finished.
Example
class Parent extends Component<Props> {
constructor(props: Props) {
super(props);
this.state = {
data: {
image: null
}
};
}
public componentDidMount() {
const dataProvider = new DataProvider(DataProvider.DBNAME);
dataProvider
.loadData("somedoc")
.then((data: object) => this.setState({ data }));
}
public render() {
const { data }: any = this.stat;
if (data.image === null) {
return null;
}
return <Child image={data.image} />;
}
}