Tag: reactjs

Simple form submit with files

I am trying to write a simple upload form with input file type using React JS. When i submit the file, it is not submitting multi form data. It is submitting plain input file name. Do we need to make any other changes if we want to write upload functionality in React. Basic javascript code […]

Passing store through context with <Provider> not working in connect() based scenario

Edit: Summary – the initial cause of my question was actually a typo: it wasn’t working due to a capital ‘G’. However, the kind answerers addressed not only the typo, but the wrong premise in the approach I was taking – if you too are passing store using Provider and using connect, their answers are […]

React: dynamically add input fields to form

I am using formsy-react for the form, I want to render more options when an event is fired, code looks something like this: class MultipleChoice extends Component { constructor(props) { super(props); } render() { return( <div> <Form> <div id=”dynamicInput”> <FormInput /> </div> </Form> </div> ); } } I have a button and onClick event I […]

How to parse ISO 8601 into date and time format using Moment js in Javascript?

I am currently using Moment js to parse an ISO 8601 string into date and time, but it is not working properly. What am I doing wrong? And I would take any other easier solutions as well. The ISO 8601 I would like to parse: “2011-04-11T10:20:30Z” into date in string: “2011-04-11” and time in string: […]

Is it possible to pass context into a component instantiated with ReactDOM.render?

TL;DR Given the following example code: ReactDOM.render(<MyComponent prop1={someVar} />, someDomNode); Is it possible to manually pass React context into the instance of MyComponent? I know this sounds like a weird question given React’s nature, but the use case is that I’m mixing React with Semantic UI (SUI) and this specific case is lazy-loading the contents […]

ECMAScript 6 arrow functions

var getTempItem = id => ({ id: id, name: “Temp” }); I know the above arrow function is equivalent to: var getTempItem = function(id) { return { id: id, name: “Temp” }; }; But I’m a bit confused about the following const Todo = ({ onClick, completed, text }) => ( <li onClick={onClick} style={{ textDecoration: […]

Render 2 table rows in ReactJS

I want to achieve expandable row functionality for table. Let’s assume we have table with task names and task complexity. When you click on one task the description of task is shown below. I try to do it this way with ReactJS (in render method): if (selectedTask === task.id) { return [ <tr> <td>{task.name}</td> <td>{task.complexity}</td> […]

this.setState makes variable undefined?

I’m trying to increment my state variable, but whenever I do so an error pops up which says that the variable state is undefined. I defined my variable inside the constructor. Obviously something is going on in the setState function. Here is the code which renders an error: displayDiv(){ var arr=[]; if (this.state.flag[2]){ this.setState({counter:counter+4}); // […]

How to use React Router on top of Rails router (not using react-rails gem)?

Now i am making React app on top off Ruby on Rails app (with out react-rails gem) by using browserify-rails to compile js files. So i tried to us react-router to config router of the app This is my main.js import React from ‘react’; import ReactDOM from ‘react-dom’; import { Router, Route } from ‘react-router’; […]

React Js: Set input value from sibling component

I am learning ReactJS and trying to develop small CRUD form using it. At this point, I am trying to set input values from other sibling component to perform update. So, if I click on edit button in first row on grid, Organzation Name and Description input boxes should get “abc com” and “company Abc” […]