React Component access Props

Question

Is it possible to access the inner property of a React Component?

Examples of React Component usually show prop types as HTML/XML inner properties:

<MyComp paramOne='val1' paramTwo='val2' />

The class for that would be:

import * as React from 'react';

export interface MyCompProps {
    paramOne: string;
    paramTwo: string;
}

export interface MyCompState {

}

export class MyComp extends React.Component<MyCompProps, MyCompState> {
    public render() {
        return <div>
            <ul>
                <li>paramOne: {this.props.paramOne}</li>
                <li>paramTwo: {this.props.paramTwo}</li>
            </ul>
        </div>;
    }
}

Is it though possible to access val3 in the following example code?

<MyComp paramOne='val1' paramTwo='val2'>val3</MyComp>

Yes, that would be the [`children`](https://stackoverflow.com/questions/49706823/what-is-this-props-children-and-when-you-should-use-it). — alissongranemann, Jan 17 '20 at 21:56
I am not sure if I understand correctly but I think that `val3` can be accessed as `this.props.children` inside `class MyComp` — Piotr Kowalski, Jan 17 '20 at 21:57

score 1 · Accepted Answer · answered Jan 17 '20 at 21:56

Your val3 would be accessible via the children prop.

export class MyComp extends React.Component<MyCompProps, MyCompState> {
    public render() {
        return <div>
            <ul>
                <li>paramOne: {this.props.paramOne}</li>
                <li>paramTwo: {this.props.paramTwo}</li>
                <li>children: {this.props.children}</li>
            </ul>
        </div>;
    }
}

<MyComp paramOne='val1' paramTwo='val2'>val3</MyComp>

React Component access Props

1 Answers1