Sp-dev-docs: Cant have html elements in react component render method

Created on 24 May 2017 · 8Comments · Source: SharePoint/sp-dev-docs

Expected or Desired Behavior

Abiliy to create react dropdown react component like in the guild
c

Observed Behavior

The project just say Cannot find name 'div'. or any html element in a react component render method

Steps to Reproduce

https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/build-custom-property-pane-controls

Source

ravenboilinux

Most helpful comment

are you developing it in ts file or tsx file?

jonathanhotono on 26 May 2017

👍14 🎉2

All 8 comments

Interesting part is if you put the react component into the file that contain the component for the webpart that was generated from yoman, typescript does not throw error on render method.

ravenboilinux on 24 May 2017

are you developing it in ts file or tsx file?

jonathanhotono on 26 May 2017

👍14 🎉2

everything is in .ts files just like the guild talks about

ravenboilinux on 26 May 2017

Firstly if you need to render react element using the xml syntax you then must use tsx file. You must also wrap the whole elements in a container

if you need to render multiple elements within render.

jonathanhotono on 31 May 2017

👍4

So why do the other files dont need tsx? I am still kinda new to typescript

ravenboilinux on 31 May 2017

tsx is basically an extension of jsx which is widely used in reactjs. If you're new to react, reading this article may help:
https://facebook.github.io/react/docs/jsx-in-depth.html
https://facebook.github.io/react/docs/hello-world.html

And maybe if necessary do a bit of tutorial (this is in ES6, not TypeScript but logically works):
https://egghead.io/courses/react-fundamentals

jonathanhotono on 31 May 2017

👍2

Closing this issue as @jonathanhotono redirected to some good resources for TSX. Feel free to re-open if you have further issues.

nickpape on 6 Jun 2017

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues