reactjs,jsx , How do I add a component after an submit event using ReactJS?


How do I add a component after an submit event using ReactJS?

Question:

Tag: reactjs,jsx

I am trying to add add a component after a submit event from another component.

var Extention  = React.createClass({
render: function(){ 
   alert("Enters the function");
    return(
        <div id="fitnesse-panel"> 
            this is where my second form code is located
        </div> 
        );
}
 });

var FormButton = React.createClass({ 
handleSubmit: function(e) {
    e.preventDefault();
    return (<Extention/>);
},
render: function() {
    return (
                <form role="form" onSubmit={this.handleSubmit}>
                    <input type="submit" value ="" />
                </form> 
            );
}
});   

What I am trying to do is click the submit button in to load on to the page. The Extension component renders the function but the JSX is not returned to the browser. Any help will be appreciated.


Answer:

Something like this should work:

var FormButton = React.createClass({ 
    getInitialState: function() {
        return {'submitted': false};
    },

    handleSubmit: function(e) {
        e.preventDefault();
        this.setState({'submitted': true });
    },
    render: function() {
        if (this.state.submitted) {
            return <Extention/>;
        }
        else {
            return (
                <form role="form" onSubmit={this.handleSubmit}>
                    <input type="submit" value ="" />
                </form> 
            );
        }
    }
});   

Related:


Events not propagating across react components


javascript,reactjs
I have the following react components: class Button extends React.Component { constructor(props){ super(props); this.state = { disabled: false }; } render() { return <button disabled={this.state.disabled} onClick={this.clicked.bind(this)}>Save</button>; } clicked(event) { this.setState({disabled: true}); } } class Form extends React.Component { contructor(props) { super(props); this.state = { foo: "bar" }; } render() {...

react-router go back a page how do you configure history?


javascript,reactjs,react-router
Can anyone please tell me how I can go back to previous page rather than a specific route? When using this code: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); Get this error, goBack()...

Reactjs this.state giving Uncaught TypeError: Cannot read property 'groupsData' of null


javascript,ajax,reactjs
I am doing 2 basic ajax calls to 2 different apis in one of my ReactJs components. Although, when running the call (on urls I know for certain are working and returning data), I receive: Uncaught TypeError: Cannot read property 'groupsData' of null Here is the single component: var BrowseWidgetBox...

ReactJs - Using Mixins with ES6


reactjs
Following up on Egghead.io's video - 'React Components in ES 6 classes', the below works: 'use strict'; import React from 'react'; import Button from './components/form/button'; import Label from './components/form/label'; // after refactoring //import ReactMixin from './super-classes/react-mixin'; //ToDo: Reactor below let reactMixin = InnerComponent => class extends React.Component { constructor() {...

React Component with subcomponents or render HTML in parent?


reactjs
I have a question regarding React patterns. When rendering a component, is it appropriate for this component to render several sub-components, or is it ok to render some HTML in the parent component. Example: If I have a box that has a heading and a body with list of elements,...

Create CRUD UI in reactjs with backend api


javascript,laravel,reactjs,react-router
Ive created a CRUD app in laravel, but now i want to improve the UI with react.js. Im still very new to react, so not sure how to go about doing this. So far i have created a table component that displays all the users with react. how should i...

React page layout using react-router


javascript,reactjs,react-router
I have a default layout page here using react router: Header = require('./components/Header'), Footer = require('./components/Footer'), var sampleApp= React.createClass({ getDefaultProps() { return { title: 'Page One' }; }, render: function (){ return ( <div className="app"> <Header title={this.props.title} /> <RouteHandler /> <Footer /> </div> ); }, }); var routes = (...

ReactJS passing a prop that the element owns to a function


javascript,reactjs
I am trying to return a <li> element with an eventListener. But I want the <li> to pass a property it owns to a function onClick. This is specifically what I am talking about: return (<li onClick={this.changeTab(tab_id)} tab_id={index + 1} <a href="#">{obj.display_name}</a></li>); But if you do something like this, you...

conversion of string to JSON object in javascript with eval() [duplicate]


javascript,reactjs
This question already has an answer here: Eval() = Unexpected token : error 7 answers I am converting the following JSON variable to string, and back to JSON, and getting error (in ReactJS, although it shouldn't be important) var questionGlobal = { "questionCons": [{ "string": "In", "alignment": 2 },...

html Forms inside reactJS


javascript,html,reactjs
I used the (almost) exact syntax for creating an html form in react: var Hello = React.createClass({ render: function() { return <div> <section> <form action="http://localhost:9203/ask"> Text: <input type="text" name="text" value="Text"/> <br/> Focus: <input type="text" name="focus" value="Focus"/> <br/><br/> <input type="submit" value="Submit"/> </form> </section> </div>; } }); React.render(<Hello name="World" />, document.getElementById('container'));...

How do I load SVGs directly in my React component using webpack?


svg,icons,reactjs,loader,webpack
I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={this.props.target} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

Jest - How to find rendered DOM component with id?


reactjs,jestjs
I am writing a simple Jest test that verifies that my component rendered. I see that React's TestUtils has functions for finding rendered components by class or by tag, but not by their ID attribute. There is a findAllInRenderedTree function, but the documentation does not explain what the callback should...

Input validation setTimeout in ReactJS


javascript,css,validation,reactjs,ecmascript-6
I have a component that renders with className="error" or classname="" depending on whether the input is valid or not. This way in CSS I can simply do .error { background: red; }. The validity of the input is determined by the isValidNumber(..) function. However, right now the problem I'm having...

Based On Styling Indesign Javascript Scripting CC


javascript,scripting,indesign,jsx
I would like to know how I can set ( either directly or some other alternative method ) the style property of "Based on" using javascript within adobe InDesign CC. If I could also ask for documentation leading to an answer for reference it would be immensely appreciated. My code:...

reactjs Uncaught TypeError: Cannot read property 'map' of undefined


javascript,jquery,ajax,reactjs
I have used getInitialState on my BrowseWidgetBox component. Although when passing the data to my MainMenu component, the data remains empty, as if the AJAX call to the api was never run in the BrowseWidgetBox. My question then, is why is this happening? Shouldn't componentDidMount call the ajax api and...

Page update when clicking a button (reactjs)


javascript,reactjs
Suppose I want to render page again, after clicking a button. How can I accomplish it? In particular how would you change my program to generate random texts, when clicking the button? var colors = ['red', 'yellow', 'blue', 'green']; var Hello = React.createClass({ randomText(color) { var style = { color:...

Cart not adding correct item in React.js


javascript,reactjs
I'm learning React.js (and I'm a beginner at JavaScript) and having some difficulty getting my addToCart function working properly. I've managed to get all my products to display but adding to cart on any of them only adds the first item, and once that item is out of stock then...

ReactJS code with and without class definitions: which one is preferred?


javascript,reactjs
Structurally, how different are these two code? Aren't they (almost) equivalent? In what situations one is preferred over the other? var Hello = React.createClass({ render: function() { return ( <div>Hello World</div> ); } }); React.render(<Hello />, document.body); and class SampleApplication extends React.Component { render() { return ( <div>Hello World</div> );...

ReactJs tries to attach onclick handler before Ajax loads element


javascript,ajax,reactjs
I am creating a dynamic list for a menu in ReactJs. The data for each menu item is bing pulled in from a JSON file via AJAX. I want the menu to close when a menu item is clicked. I am giving the whole list the prop "whenClicked" when one...

how to render through a simple for-loop in Reactjs?


javascript,reactjs,flux
I have a simple react component defined below React.createClass({ generateContent:function(){ for(i = 1;i<=100;i++) if(i%2 == 0) { return <li>Even!</li> } else{ return <li>Odd!</li> } }, render:function(){ return (<ul> {this.generateContent()} </ul>) } }) While Rendering, The component returns the first statement of the for loop(<li>Odd</li>) and then exits. I'd like something...

Better/faster way for changing React array state than cloning it?


reactjs
Whenever a React class has a state object that is or contains an array, updating that state feels awkward. Usually what I do is var newArrayThing = _.clone(this.state.arrayThing); //or slice() newArrayThing[123] = 42; //update stuff this.setState({arrayThing: newArrayThing}); Is there a better or more elegant way of handling this I am...

Why should addChangeListener be in componentDidMount instead of componentWillMount?


javascript,reactjs,reactjs-flux,flux
I saw this line as an answer to another question on here: "componentWillMount should be componentDidMount, or else you'll leak event emitters in node." and I don't really understand it. Can someone explain with more detail? More info: Building a react application with flux, as part of the initial render,...

React components as plain JS objects?


javascript,class,reactjs,javascript-objects,ecmascript-6
Does anybody has experience in working with React components as plain JS objects instead of annoying ES6 classes and deprecated .createClass method. Maybe you have some examples of factory functions or similar to share? Thanks!...

Passing an element vs. a react class to an optionally displayed modal


reactjs,react-bootstrap
I have a table cell that the user can click on which will launch a react-bootstrap modal that displays additional details. The modal displays a component that has its own state and may trigger an action to pull data from the back-end if the store doesn't have the data it...

Hide context menu on outside click


javascript,reactjs
I have a context menu that appears when you right click inside the <div>, and it only goes away if the user click left click inside the <div> again. How do i hide it when a user click anywhere on the page? my fiddle...

Encapsulation with React child components


coding-style,reactjs,encapsulation
How should one access state (just state, not the React State) of child components in React? I've built a small React UI. In it, at one point, I have a Component displaying a list of selected options and a button to allow them to be edited. Clicking the button opens...

Nesting in Default Route


javascript,reactjs,react-router
I have an applications index page that lists all my applications. The index page is also the default route. I want to nest a 'applications new' modal in the index page. This way I can render the modal while on top of the index page. However, I'm not able to...

React - superagent request per mapped item


javascript,reactjs,superagent
I would like to fire off a superagent request for each item mapped in my search results. To check if the item id is in an array: I have these methods; one to map the results, and the other a superagent fetch: renderResultNodes: function () { if(!this.props.results) return; return this.props.results.map(function...

Dynamic className in cjsx


coffeescript,reactjs
I am trying to hide a component and update the image in a button when I click said button. I have managed to hide the component by doing the follow: {<MyAwesomeComponent /> unless @state.hide} And I change the state by doing: toggleComponent = -> @setState hide: [email protected] . . ....

After scrolling on IPad, some content of my website is hidden behind a white area


javascript,html,ios,css,reactjs
Introduction We're developing a website and on one page we'd like to display some simple charts. Therefore we're using canvas to draw the charts. I konw there are other great libraries therefore, but right know we just need a quick and dirty solution for a first shot. Generally we work...

Error: Cannot resolve module 'module' in path/…/rewire/lib


reactjs,flux
I am using rewire prior to require method in my React/Flux app, to load components. But after installation I got this error: ERROR in ./~/rewire/lib/rewire.js Module not found: Error: Cannot resolve module 'module' in /Users/path/node_modules/rewire/lib @ ./~/rewire/lib/rewire.js 1:13-30 ERROR in ./~/rewire/lib/rewire.js Module not found: Error: Cannot resolve module 'fs' in...

React js css transitions on class removal


twitter-bootstrap,reactjs,css-transitions
I have column that should have different width depending on some flag. I use Bootstrap, so I assign col-xs-12 and col-xs-2 depending on the flag. Now I want it to change width slowly with css transition. I've read official React.js doc about transitions, but it doesn't apply to my case:...

JQuery .animate() not working with ReactJS?


jquery,reactjs
I am trying to highlight a cell when the user click on it by using jQuery .animate() clickHandler: function() { var cell = React.findDOMNode(this.refs.cell); // $(cell).css("background-color", "blue"); // THIS WORK $(cell).animate({ backgroundColor: "blue" }, 1000); // THIS DOESN'T WORK }, I am also using React.addons.CSSTransitionGroup. Maybe there is a conflict...

How to access nested object in React js 0.13.3


javascript,jquery,html,reactjs
The below added code is working fine in React js 0.10.0. I wanna run same code in 0.13.0 version also. My main requirement is accessing nested object as default object like "this.state.data.query.results.channel.item.condition.temp". <!doctype html> <html> <head> <title>Weather Widget</title> <link rel="stylesheet" href="weather.css" /> <script src="http://fb.me/react-0.10.0.js"></script> <script src="http://fb.me/JSXTransformer-0.10.0.js"></script> <script...

Adding multiple divs or renders in ReactJs


javascript,web-applications,reactjs,react-jsx
I'm having trouble in wanting to create multiples of the same html that I render in a certain class. For example, I have a div that might look like this [Header goes here, is a input field] [Dropdown] [TextArea] [Submit] [Add another field] On add another field, I would like...

Should every object in the store state be immutable?


javascript,reactjs,immutability,flux,immutable.js
I am learning React.js and Flux, and I understand that is better to keep the object immutable because comparing them is O(1). My situation is this: I have a store, which has a _state object, that is a map (I'm using Immutable-js). That _state has some booleans, some strings and...

No call function of parent in Reactjs


javascript,jquery,ruby-on-rails,reactjs
I have two function in Reactjs. When function one call a function of function two. There have error same as "Uncaught TypeError: this.props.onButonShowClick is not a function" This is function one : var HiddenEdit = React.createClass({ _handleOnClick: function(e) { e.preventDefault(), this.props.onButonShowClick(true); }, render: function() { return (<span className="col-lg-2 btn-action-group"> <a...

What is the proper way to get the value of a React