Child Component doesn't render data passed from Parent component

Question

I have child component, inside the render function I am populating a view like this

{this.state.supportTopicMetadataTreeNode.children.map(
                        (metadata: SupportTopicMetadataTreeNode) => (
                            <div>
                                <SupportTopicMetadataContainer
                                    supportTopicMetadataTreeNode={metadata}
                                ></SupportTopicMetadataContainer>

                            </div>
                        )
  )}

Which is type of SupportTopicMetadataTreeNode Like below:

export default class SupportTopicMetadataTreeNode {
    public data: SupportTopicMetadata;
    public children: SupportTopicMetadataTreeNode[];
}

In Parent Component I am calling above Component like below:

 {this.state.metadataList && this.state.metadataList.map((metadata: SupportTopicMetadataTreeNode) =>
                    <div>
                        <SupportTopicMetadataContainer supportTopicMetadataTreeNode={metadata}>
                        </SupportTopicMetadataContainer>
                    </div>

                )}

Before calling Child function above I am setting state with my current modified value to metadaList like this:

this.setState({ metadataList: filteredList });

But in child component it doesn't populate with valid data that is filteredList. I have checked that state is correctly assigned my expected value to metadataList Not getting what the problem is?

I am also trying to pass filteredList to child component so that can loop directly on this.state.supportTopicMetadataTreeNode.children

Any idea how to pass that to child state or variable that defined on child state?

Update:

I have initialize the constructor like below:

constructor(props: ISupportTopicMetadataEntryContainerProps) {
        super(props);
        this.state = {
            supportTopicMetadataTreeNode: props.supportTopicMetadataTreeNode,


        };

    }

So I need not to call like this this.props.supportTopicMetadataTreeNode.children as answered like this. Now I can get that this.state.supportTopicMetadataTreeNode.children. Don't understand what's the problem.

Does this answer your question? [React | pass data from parent to child component](https://stackoverflow.com/questions/48952882/react-pass-data-from-parent-to-child-component) — Manu Sharma, May 27 '20 at 12:18

score 0 · Accepted Answer · answered May 27 '20 at 12:13

0

You was using incorrect data of your component. In your child component SupportTopicMetadataContainer, supportTopicMetadataTreeNode is props, not state like you're using this.state.supportTopicMetadataTreeNode.children.

It should be this.props.supportTopicMetadataTreeNode.children, that'll fix your issue.

answered May 27 '20 at 12:13

dungmidside

508
7
19

I have tried that but the data in `filteredList.children` and `this.props.supportTopicMetadataTreeNode.children` are different that's why I am here... not getting the clue, even I got some `[]` empty array on `this.props.supportTopicMetadataTreeNode.children` when its passed to `SupportTopicMetadataContainer` component – Md Farid Uddin Kiron May 27 '20 at 13:50
Could you show the whole component code or some kinds of all process? You could put it to codesandbox or update in the question, it would help a lot to understand what issue you got – dungmidside May 28 '20 at 02:39
Its a big component very tough to include here in question as well sandbox. I am trying on codesandbox. – Md Farid Uddin Kiron May 28 '20 at 06:50
Just the main part, no need whole project – dungmidside May 28 '20 at 08:02
Yes am talking about a single component, trying it. – Md Farid Uddin Kiron May 28 '20 at 08:13

Child Component doesn't render data passed from Parent component

1 Answers1