CODEWITHSUNDEEP
reactjs
GreedyAi
GreedyAi

Reputation: 2839

how to put react tic tac toe in ant design header sider layout?

I have finished the tic tac toe guide. Now I wanted to experiment with ant design, but something seems to be wrong. I took the code from and design and I tried to put the tag in the jsx code. I am getting error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

All I did by far was change the root div in HTML to container div. Both the tic tac toe game code and the layout code work fine separately. but once I try to put the tag in layout content page, I get the error mentioned above.

Layout code - link to source.

Game code.(just the game part, the squares and board is excluded) - link to source.

the problem appears when I put tag in the code above.

     <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
        <Game />
     </Content>

The layout works fine without the Game tag and the Game works fine when used just in ReactDOM.render.

ReactDOM.render(<Game />, document.getElementById("container"));

Why is tag not working? How do I make it work?

I figured it out. I copied the game code in layout codesandbox source and it worked. than I copied the same code in my project and it worked there too. I took both codes and compared them and the only difference was in order of ReactDOM.render and Game.component. As shown in below answer the code works fine when copied correctly.

Upvotes: 0

Views: 94

Answers (1)

Hamid Sarani
Hamid Sarani

Reputation: 795

it's work fine!!

i copy and paste your codes to a single CodeSandBox and it's work currectly look at this:

https://codesandbox.io/s/5k6workkvl

Upvotes: 1

Related Questions