React, cannot display multiple brackets

[sherman721]

I'm having an issue running this with React and displaying multiple brackets on one page. Here is my code:

import React, { useEffect } from 'react';

async function render(data) {
window.bracketsViewer.render('#root', {
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
});
}

function Tournament({data}) {
useEffect(() => {
render(data)
}, [data]);

return <div id="root"></div>;
}

I keep getting back the error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach') at e.BracketsViewer.render (brackets-viewer.min.js:1:13197)

Do you know how I can display multiple brackets? When I have just one bracket it works perfectly but if I add a second it falls apart. Thanks in advance

[Drarig29]

Hey @sherman721! Can you try with the code that I updated in https://github.com/Drarig29/brackets-viewer.js/issues/20?

You also have a demo here: https://replit.com/@Drarig29/React-and-brackets-viewerjs

You are using outdated code:

- window.bracketsViewer.render('#root', {
+ window.bracketsViewer.render({
  stages: data.stage,
  matches: data.match,
  matchGames: data.match_game,
  participants: data.participant,
});

You should not use a CSS selector as the first argument anymore, but the object containing the data you want to render.

By default, the library will look for an element with a brackets-viewer class. If you want to make this custom, you can use selector in the second parameter, like this:

https://github.com/Drarig29/brackets-viewer.js/blob/55b514beaa30911aa4c4568fbe71a74a1e672679/demo/with-api.html#L69

[Drarig29]

Do you know how I can display multiple brackets? When I have just one bracket it works perfectly but if I add a second it falls apart.

If what I said above doesn't fix your issue, please send your data object in this issue.

[sherman721]

Hey yes I originally tried going off that demo and it doesn't work as I get back the error "Error: Multiple possible roots were found. Please use config.selector to choose a specific root. at e.findRoot (brackets-viewer.min.js:1:6155)"

Like I said, when I just input one bracket it works as expected but as soon as I add a second (even if its the same object) i get these errors. Here is the data object:

{
    "stage": [
        {
            "id": 0,
            "tournament_id": 0,
            "name": "OTP Invitational",
            "type": "double_elimination",
            "number": 1,
            "settings": {
                "seedOrdering": [
                    "inner_outer",
                    "natural",
                    "reverse"
                ],
                "size": 8,
                "grandFinal": "double",
                "matchesChildCount": 0
            }
        }
    ],
    "match": [
        {
            "id": 0,
            "number": 1,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 0,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 1,
                "position": 1
            },
            "opponent2": null
        },
        {
            "id": 1,
            "number": 2,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 0,
            "child_count": 0,
            "status": 2,
            "opponent1": {
                "id": 4,
                "position": 4,
                "score": 11,
                "result": "win"
            },
            "opponent2": {
                "id": 5,
                "position": 5,
                "score": 7,
                "result": "loss"
            }
        },
        {
            "id": 2,
            "number": 3,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 0,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 2,
                "position": 2
            },
            "opponent2": null
        },
        {
            "id": 3,
            "number": 4,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 0,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 3,
                "position": 3
            },
            "opponent2": null
        },
        {
            "id": 4,
            "number": 1,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 1,
            "child_count": 0,
            "status": 1,
            "opponent1": {
                "id": 1,
                "score": 9,
                "result": "loss"
            },
            "opponent2": {
                "id": 4,
                "score": 11,
                "result": "win"
            }
        },
        {
            "id": 5,
            "number": 2,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 1,
            "child_count": 0,
            "status": 2,
            "opponent1": {
                "id": 2,
                "score": 12,
                "result": "win"
            },
            "opponent2": {
                "id": 3,
                "score": 3,
                "result": "loss"
            }
        },
        {
            "id": 6,
            "number": 1,
            "stage_id": 0,
            "group_id": 0,
            "round_id": 2,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 4,
                "score": 7,
                "result": "loss"
            },
            "opponent2": {
                "id": 2,
                "score": 11,
                "result": "win"
            }
        },
        {
            "id": 7,
            "number": 1,
            "stage_id": 0,
            "group_id": 1,
            "round_id": 3,
            "child_count": 0,
            "status": 0,
            "opponent1": null,
            "opponent2": {
                "id": 5,
                "position": 2
            }
        },
        {
            "id": 8,
            "number": 2,
            "stage_id": 0,
            "group_id": 1,
            "round_id": 3,
            "child_count": 0,
            "status": 0,
            "opponent1": null,
            "opponent2": null
        },
        {
            "id": 9,
            "number": 1,
            "stage_id": 0,
            "group_id": 1,
            "round_id": 4,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 3,
                "score": 11,
                "result": "win"
            },
            "opponent2": {
                "id": 5,
                "score": 8,
                "result": "loss"
            }
        },
        {
            "id": 10,
            "number": 2,
            "stage_id": 0,
            "group_id": 1,
            "round_id": 4,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 1,
                "position": 1
            },
            "opponent2": null
        },
        {
            "id": 11,
            "number": 1,
            "stage_id": 0,
            "group_id": 1,
            "round_id": 5,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 3,
                "score": 12,
                "result": "win"
            },
            "opponent2": {
                "id": 1,
                "score": 6,
                "result": "loss"
            }
        },
        {
            "id": 12,
            "number": 1,
            "stage_id": 0,
            "group_id": 1,
            "round_id": 6,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 4,
                "score": 6,
                "result": "loss"
            },
            "opponent2": {
                "id": 3,
                "score": 11,
                "result": "win"
            }
        },
        {
            "id": 13,
            "number": 1,
            "stage_id": 0,
            "group_id": 2,
            "round_id": 7,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": 2,
                "score": 11,
                "result": "win"
            },
            "opponent2": {
                "id": 3,
                "position": 1,
                "score": 8,
                "result": "loss"
            }
        },
        {
            "id": 14,
            "number": 1,
            "stage_id": 0,
            "group_id": 2,
            "round_id": 8,
            "child_count": 0,
            "status": 0,
            "opponent1": {
                "id": null
            },
            "opponent2": {
                "id": null
            }
        }
    ],
    "match_game": [],
    "participant": [
        {
            "id": 1,
            "name": "The Injured",
            "players": "Kirsh + Carl",
            "tournament_id": 0
        },
        {
            "id": 2,
            "name": "Fried Worm",
            "players": "Worm + Fried Calamari",
            "tournament_id": 0
        },
        {
            "id": 3,
            "name": "Sammy's UofI",
            "players": "Toss + Abraham",
            "tournament_id": 0
        },
        {
            "id": 4,
            "name": "APT 2611",
            "players": "Samsung + Alexander The Grape",
            "tournament_id": 0
        },
        {
            "id": 5,
            "name": "Acquaintances",
            "players": "Ron + Mullet Man",
            "tournament_id": 0
        }
    ],
    "champions": {
        "name": "Fried Worm",
        "players": "Worm + Fried Calamari"
    }
}

[Drarig29]

Can you show your code to "add a second bracket (even if its the same object)"?

Do note use window.bracketsViewer.render('#root', { ... }). Replace it with window.bracketsViewer.render({ ... }).

If you render() twice on the same container with class brackets-viewer, the bracket will be appended to it.

You can try by doing this:

await window.bracketsViewer.render({
    stages: data.stage,
    matches: data.match,
    matchGames: data.match_game,
    participants: data.participant,
})

await window.bracketsViewer.render({
    stages: data.stage,
    matches: data.match,
    matchGames: data.match_game,
    participants: data.participant,
})

You'll notice that 2 brackets with the same data are added.

If for some reason, you want to have multiple containers in the page, you can do:

<div id="container1" class="brackets-viewer"></div>
<div id="container2" class="brackets-viewer"></div>

And then:

await window.bracketsViewer.render({
    stages: data1.stage,
    matches: data1.match,
    matchGames: data1.match_game,
    participants: data1.participant,
}, {
    selector: '#container1'
})

await window.bracketsViewer.render({
    stages: data2.stage,
    matches: data2.match,
    matchGames: data2.match_game,
    participants: data2.participant,
}, {
    selector: '#container2'
})

[sherman721]

Rendering twice worked! thanks so much for your help!

[Drarig29]

@sherman721 can you share what you were doing? This can help future people, and I could even add a check for it, or make it possible. 😁

[sherman721]

Definitely, I'm away from my computer now but when I get back I'll add it