Code in Atom - lookin nice :D
This code won't working and I have no idea why ;/
In app it's making empty markup and under text "zehy".
I'm new in ReactJs and it's very frustrating ...
Components need to be PascalCase in order to work. In JSX, lower case names aren't treated as html tags. Change <taskItem /> to <TaskItem />
React components need to be upper-cased first letter (capitalised).
See https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
Related
Hi Im getting text data from react markdown ,
const exampleMarkDown=
`<ol>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ol>`
and the output is
1.example1
2.example2
3.example2
and I would like to add material ui icon right next to
1. example <ICON HERE>
in react component.
so is there's any way I can do that??
You can use string literals and include the component next to the string.
const exampleMarkDown=
`<ol>
<li>example1 ${<Icon>}</li>
<li>example2 ${<Icon>}</li>
<li>example3 ${<Icon>}</li>
</ol>
`
EDIT: Ah, i just noticed you said you're using react markdown, sorry about that. I haven't used that library before, the only thing I can think of is adding the icon in the markdown before you receive it.
I am trying to build a react app with customized components. The input to the app is a jsx(as a string) coming from an API.
Now i want to render this input jsx (a string variable), but not able to do that. I have tried eval() and dangerouslySetInnerHTML options, but it did not work out.
My JSX String looks like
'<div> <MyComponent attr_1={this.state.array["field"]}></MyComponent> </div>'
Hi I figured out JsxParser is the right way of solving my problem.
react-jsx-parser provides capability to parser and render react component from JSX string.
When trying to hide an input tag in regular html you can use the following:
<input hidden />
and when you want to show the tag we use:
<input />
Apparently in the return portion of a react component you can do the following to hide an element:
<input hidden={true} />
I can't find any documentation for this. Could someone direct me to a source?
Any standard or custom DOM attributes are fully supported according to the docs, just camel case them and react will put the corresponding attribute in the actual dom.
https://reactjs.org/docs/dom-elements.html
you may also find it helpful to read the intro to JSX since there may be confusion there.
https://reactjs.org/docs/introducing-jsx.html
Lastly just being nit picky <inpupt /> is a react element not a react component.
Difference between React Component and React Element
React has something like this.props.children: https://facebook.github.io/react/tips/children-props-type.html
Does Vue.js have also some similar to access the child-elements?
The equivalent to this.props.children in Vue is <slot />.
Example
<template>
<div>
<slot />
</div>
</template>
See http://vuejs.org/guide/components.html#Content-Distribution-with-Slots
In your requirement：
Using slot is a right way to pass a custom component into the child component, when you are in the parent component level.
But why doesn't it work? Because in Vue 1.0, it uses the browser to parse the template, not virtual DOM. Browser-parsing has a problem: some HTML elements have restrictions on what elements can appear inside them.
see Vue1.0 Doc: vue1.0 - components - template parsing
And you happen to make that mistake.
This is a limitation in Vue1.0, you have to write some Directives to do them.
But in Vue 2.0, things have changed, the template-parsing became a virtual-dom implement. You can pass any DOM elements into slot.
I try your link in last comment with Vue 2.0, it works.
Just change the External Resources to https://unpkg.com/vue#2.0.1/dist/vue.js
Vue.js has this.$children, which also gives you an array of child components
http://vuejs.org/api/#vm-children
If you want to reference specific components, you might want to use v-ref and this.$refs
This is my first using of react.js and
Code works in browser but html is highlighting in red how to fix this. I'm using JSX Harmony, Webstorm 11 ?
You can't put raw HTML/JSX into render. If you look at the docs, you'll see that you need to pass a ReactElement to render.
The easiest way to do that would be to create a simple React class using React.createClass()