Why isn't JSX saved as a const rendering

I am fairly new to React & JSX however I was under the impression that you can save JSX as pretty much anything (var,const, let...). However when I save it as a const and try to render it like so: import React from 'react'; import ReactDOM from...
more »

2017-08-11 11:08 (4) Answers

Put a conditional statement in my JSX

<li className=`nav-item {(this.props.activteState===1) ? "active":""}`><a href="#">Main</a></li> ^ This is my code. I want the classname "active" to appear next to "nav-item" if the condition is met. I thought putting backti...
more »

2017-08-06 03:08 (1) Answers

Render an HTMLImageElement dom node in Preact

(Attention: I am asking about Preact, not React for which there are solutions using Reacts DomElement wrapper component). I have an HTMLImageElement, which is created using var img = document.createElement('img'). How can I render this manually crea...
more »

2017-08-05 20:08 (0) Answers

How to skip null while map? JSX

I'm new with ReactJs/Redux and JSX. I have a dynamical table with dynamic information in it. I have problem with map. I have 2 levels of map: <tbody> { data.map(row => ( <tr key={`${row.type}`}> <td> ...
more »

2017-07-28 15:07 (3) Answers

Create an extensible architecture with React

My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section). ...
more »

2017-07-27 18:07 (0) Answers

Import a function from JS to JSX

I have a JS file containing this code: module.exports = function loadMyFun() { function activateSite($currentItem) { ... } ... } And I want to import it into a JSX file, I tried to do it like this but I doesn't work: import MyN...
more »

2017-07-25 09:07 (2) Answers

React slide in navigation on button click

I am starting to work with React and trying to get my head around it. I am currently trying to build a navigation component that slides in when a button is clicked (the button lives in another component). Here is my code so far, class Application...
more »

2017-07-24 13:07 (2) Answers

reloading of react component in a tab

I created a react component that is basically a table. I called using a function with some parameters f(X, idPlaceholder). So f behaves like: f(X, idPlaceholder) { .... ReactDom.render( <T ... /> , document.getElementById(idPla...
more »

2017-07-19 22:07 (0) Answers

React "this" is always null in functions

I have this class. In all functions, this equals null except render() in Idea class. I tried to repeat solution from React.js: onChange event for contentEditable class Idea extends React.Component { render() { return ( ...
more »

2017-07-18 09:07 (4) Answers

Calling a function in React

I'm a beginner in React, and I'm little confused about calling a function in React. I saw the following ways and i don't when to use and which one. handleAddTodo ={this.handleAddTodo} handleAddTodo ={this.handleAddTodo()} handleAddTodo ={handleAdd...
more »

2017-07-14 11:07 (6) Answers

Join JSX with JSX

I've got a situation where I have several labels, with separator arrows in between them - sort of like breadcrumbs. The last label has no arrow after it. This seems like a perfect situation for .join(), for example: [1,2,3,4].join('->'); // "1...
more »

2017-07-06 23:07 (1) Answers

img src attribute url in jsx

I am trying to display images from an array, but when I am passing the src value as an expression {} it is just returning in the form of the object instead of a string.can anyone explain? export default class Home extends Component{ constructor(...
more »

2017-06-29 03:06 (1) Answers

How to update parent's state?

I am new to react and trying to update parent's state but no luck so far. Component class InputBox extends Component { constructor(props) { super(props); this.type = props.type; } render() { return ( <div> <...
more »

2017-06-20 21:06 (2) Answers

how can i use if inline react jsx

I wanna use 'if' in react router for check user is login but i don't know about correct syntax: const RouteWithSubRoutes = (route) => ( <Route exact path={route.path} render={props => ( <route.component {...props} routes={route.r...
more »

2017-06-17 13:06 (2) Answers

Get props in action -> reducer -> costum function

I have a component which is the "base" for another component. I want to add some more functionality to the newly created component <SomeComponent onSelect = { this.props.handleSelect } onDeselect = { this.props.handleDeselect } selectionList = { ...
more »

2017-05-25 08:05 (1) Answers

JSX does not compile in for loop

The following code does not compile correctly for me as JSX : let headerText = ""; if (objArgs.column.name instanceof Array) { headerText = <ul>; objArgs.column.name.forEach( (item, idx) => { headerText = headerText + &...
more »

2017-05-22 18:05 (1) Answers

Using React linking images inside of components

I am learning react. I have a file website_index.js inside my components folder inside my src folder. Also inside my src folder is an images folder. I am trying to link pictures in a carousel to the pictures in the image folder but no matter what pat...
more »

2017-05-20 23:05 (2) Answers