Render different elements on different locations in React.js

Question

In the parent file (NotificationParent) I get some data like this:

class Parent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            notifications: []
        }
    }

    componentDidMount() {
        var self = this;

        axios.get('url here').then(function (response) {
            self.setState({
                notifications: response.data
            });
        })
    }

    render() {
        const notifications = this.state.notifications.map( (notification, i) => <NotificationCount key={i} {...notification} /> );

        return (
            <div>
                {notifications}
            </div>
        )
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('notifications')
);

ReactDOM.render(
    <NotificationTotal />,
    document.getElementById('notificationcount')
);

In a second file (NotificationCount) I render this on the screen like:

render() {
    return (
        <li>
            <a href="#">
                {this.props.title}
            </a>
        </li>
    )
}

In the third file (NotificationTotal) I'd like to show the amount of titles it has (example: 2):

export class NotificationTotal extends React.Component {
    render() {
        return (
            <div>{amount goes here}</div>
        )
    }
}

In the third file (NotificationTotal) I can't get a amount because it does not know the props. How can I fix this?

You can pass them from the parent. You can either pass the notifications directly or only pass the count, e.g.: ``. Then `this.props.notifications` is available in the component. — Gegenwind, Nov 02 '17 at 15:04
@user2672106 When doing that I get the error `Uncaught TypeError: Cannot read property 'notification' of undefined` — Mick D, Nov 02 '17 at 15:11
You need to define an inital value for props. Have a look here: https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props — Gegenwind, Nov 02 '17 at 15:14
Ain't I doing that already with this: `this.state = { notifications: [] }` @user2672106 — Mick D, Nov 02 '17 at 15:22

score 0 · Answer 1 · answered Nov 03 '17 at 08:25

Chase deAnda delivered the final solution by creating an extra function. Code of the parent file:

let outsideData = [];

class Parent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            notifications: []
        }
    }

    componentDidMount() {
        ...
    }

    componentWillUnMount() {
        ...
    }

    componentDidUpdate(nextProps, nextState) {
        outsideData = nextState.notifications;
    }

    render() {
        const notifications = this.state.notifications.map( (notification, i) => <NotificationCount key={i} {...notification} /> );

        renderNotifications(this.state.notifications);

        return (
            <div>
                {notifications}
            </div>
        )
    }
}

const Notification = ({ title, read }) => (
    <div>
        <span>{title}</span>
        <span>{read}</span>
    </div>
);

ReactDOM.render(
    <Parent />,
    document.getElementById('notifications')
);

function renderNotifications (notifications) {
    ReactDOM.render(
        <NotificationTotal notifications={notifications} />,
        document.getElementById('notificationcount')
    );
}

Render different elements on different locations in React.js

1 Answers1