Having trouble with react tutorial, Invariant Violation - reactjs

I'm trying to follow a react tutorial but it's not working. Here's the code:
// load react library
var React = require('react');
var ReactDOM = require('react-dom');
/*
App
*/
var App = React.createClass({
render: function(){
<div className='catch-of-the-day'>
<div className='menu'>
<Header />
</div>
</div>
}
});
var Header = React.createClass({
render : function() {
return(
<p>Header</p>
)
}
});
//build first component
/*
StorePicker
*/
var StorePicker = React.createClass({
render : function(){
var name = 'Bob';
return (
<form className='store-selector'>
{/* comments go here */}
<h2>Please Enter A Store {/* {name} */}</h2>
<input type="text" ref='storeId' required/>
<input type="submit"/>
</form>
)
}
});
ReactDOM.render(<App/>,document.querySelector('#main'));
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Catch of the Day!</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/build/css/style.css">
<link rel="shortcut icon" href="http://facebook.github.io/react/favicon.ico">
</head>
<body>
<input type="checkbox" id="fold">
<label for="fold">Fold</label>
<div id="main">
<!-- This is where our React app will go -->
</div>
<div id='new'>
</div>
<script src="/build/main.js"></script>
</body>
</html>
and here's the error message:
Uncaught Error: Invariant Violation: App.render(): A valid ReactComponent
must be returned. You may have returned undefined, an array or some other
invalid object.


Your App#render doesn't return anything. More or less what the error message says.
Contrast App#render with Header#render.
Unrelated, but you might want to follow a more-recent tutorial; createClass is deprecated.

Related

Wow slider with react.js is not working

I have created a page with fullpage.js and in one of the sections I've integrated wow slider. Same thing is working perfectly in html page but not when integrated in react.js. Getting following error.
Uncaught TypeError: Cannot read property 'replace' of undefined
at N
Script for wow slider
function ws_glass_parallax(d,l,m){var f=jQuery;var i=f(this);var j=d.parallax||0.25;var k=f("<div>").css({position:"absolute",display:"none",top:0,left:0,width:"100%",height:"100%",overflow:"hidden"}).addClass("ws_effect ws_glass_parallax").appendTo(m);var h=!d.noCanvas&&!window.opera&&!!document.createElement("canvas").getContext;if(h){try{document.createElement("canvas").getContext("2d").getImageData(0,0,1,1)}catch(q){h=0}}function t(e){return Math.round(e*1000)/1000}var u=f("<div>").css({position:"absolute",left:0,top:0,overflow:"hidden",width:"100%",height:"100%",transform:"translate3d(0,0,0)",zIndex:1}).appendTo(k);var s=u.clone().appendTo(k);var r=u.clone().css({width:"20%"}).appendTo(k);var c;var p=u.clone().appendTo(k).css({zIndex:0});this.go=function(C,A,x){var e=f(l.get(A));e={position:"absolute",width:e.width(),height:e.height(),marginTop:e.css("marginTop"),marginLeft:e.css("marginLeft")};x=x?1:-1;var E=f(l.get(A)).clone().css(e).appendTo(u);var z=f(l.get(C)).clone().css(e).appendTo(s);var v=f(l.get(C)).clone().css(e).appendTo(r);if(x==-1){r.css({left:"auto",right:0});v.css({left:"auto",right:0})}else{r.css({left:0,right:"auto"});v.css({left:0,right:"auto"})}var D=(m.width()||d.width)*1.3;var B=m.height()||d.height;var y;if(h){if(!c){c=f("<canvas>").css({position:"absolute",left:0,top:0}).attr({width:e.width,height:e.height}).appendTo(p)}c.css(e).attr({width:e.width,height:e.height});y=o(f(l.get(C)),e,10,c.get(0))}if(!h||!y){h=0}wowAnimate(function(G){G=f.easing.swing(G);var L=t(x*G*D),F=t(x*(-D+G*D-(1-G)*D*0.2)),J=t(x*(-D*1.4+G*(D*1.4+D/1.3))),w=t(-x*D*j*G),H=t(x*D*j*(1-G)),I=t(-x*D*(j+0.2)*G),K=t(x*(-D*0.2+G*D*0.4));if(d.support.transform){u.css("transform","translate3d("+L+"px,0,0)");E.css("transform","translate3d("+w+"px,0,0)");s.css("transform","translate3d("+F+"px,0,0)");z.css("transform","translate3d("+H+"px,0,0)");r.css("transform","translate3d("+J+"px,0,0)");v.css("transform","scale(1.6) translate3d("+I+"px,0,0)");p.css("transform","translate3d("+K+"px,0,0)")}else{u.css("left",L);E.css("margin-left",w);s.css("left",F);z.css("margin-left",H);r.css("left",J);v.css("margin-left",I);p.css("left",K)}},0,1,d.duration,function(){k.hide();E.remove();z.remove();v.remove();i.trigger("effectEnd")})};function o(C,A,B,v){var F=(parseInt(C.parent().css("z-index"))||0)+1;if(h){var I=v.getContext("2d");I.drawImage(C.get(0),0,0,A.width,A.height);if(!a(I,0,0,v.width,v.height,B)){return 0}return f(v)}var J=f("<div></div>").css({position:"absolute","z-index":F,left:0,top:0}).css(A).appendTo(v);var H=(Math.sqrt(5)+1)/2;var w=1-H/2;for(var z=0;w*z<B;z++){var D=Math.PI*H*z;var e=(w*z+1);var G=e*Math.cos(D);var E=e*Math.sin(D);f(document.createElement("img")).attr("src",C.attr("src")).css({opacity:1/(z/1.8+1),position:"absolute","z-index":F,left:Math.round(G)+"px",top:Math.round(E)+"px",width:"100%",height:"100%"}).appendTo(J)}return J}var g=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];var n=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function a(am,U,S,v,w,ad){if(isNaN(ad)||ad<1){return}ad|=0;var ah;try{ah=am.getImageData(U,S,v,w)}catch(al){console.log("error:unable to access image data: "+al);return false}var C=ah.data;var ab,aa,aj,ag,J,M,G,A,B,R,H,T,P,X,ac,K,F,L,N,W;var ak=ad+ad+1;var Y=v<<2;var I=v-1;var af=w-1;var E=ad+1;var ae=E*(E+1)/2;var V=new b();var Q=V;for(aj=1;aj<ak;aj++){Q=Q.next=new b();if(aj==E){var D=Q}}Q.next=V;var ai=null;var Z=null;G=M=0;var O=g[ad];var z=n[ad];for(aa=0;aa<w;aa++){X=ac=K=A=B=R=0;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}for(aj=1;aj<E;aj++){ag=M+((I<aj?I:aj)<<2);A+=(Q.r=(F=C[ag]))*(W=E-aj);B+=(Q.g=(L=C[ag+1]))*W;R+=(Q.b=(N=C[ag+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next}ai=V;Z=D;for(ab=0;ab<v;ab++){C[M]=(A*O)>>z;C[M+1]=(B*O)>>z;C[M+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(G+((ag=ab+ad+1)<I?ag:I))<<2;X+=(ai.r=C[ag]);ac+=(ai.g=C[ag+1]);K+=(ai.b=C[ag+2]);A+=X;B+=ac;R+=K;ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=4}G+=v}for(ab=0;ab<v;ab++){ac=K=X=B=R=A=0;M=ab<<2;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}J=v;for(aj=1;aj<=ad;aj++){M=(J+ab)<<2;A+=(Q.r=(F=C[M]))*(W=E-aj);B+=(Q.g=(L=C[M+1]))*W;R+=(Q.b=(N=C[M+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next;if(aj<af){J+=v}}M=ab;ai=V;Z=D;for(aa=0;aa<w;aa++){ag=M<<2;C[ag]=(A*O)>>z;C[ag+1]=(B*O)>>z;C[ag+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(ab+(((ag=aa+E)<af?ag:af)*v))<<2;A+=(X+=(ai.r=C[ag]));B+=(ac+=(ai.g=C[ag+1]));R+=(K+=(ai.b=C[ag+2]));ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=v}}am.putImageData(ah,U,S);return true}function b(){this.r=0;this.g=0;this.b=0;this.a=0;this.next=null}};
jQuery("#wowslider-container1").wowSlider({effect:"glass_parallax",prev:"",next:"",duration:20*100,delay:20*100,width:640,height:360,autoPlay:false,autoPlayVideo:false,playPause:false,stopOnHover:false,loop:false,bullets:1,caption:true,captionEffect:"traces",controls:false,controlsThumb:false,responsive:2,fullScreen:false,gestures:2,onBeforeStep:0,images:0});
Created app using create-react-app
App.js code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<ul id="menu">
<li data-menuanchor="firstPage">firstPage</li>
<li data-menuanchor="secondPage">secondPage</li>
<li data-menuanchor="3rdPage">3rdPage</li>
<li data-menuanchor="4thpage">4thpage</li>
<li data-menuanchor="5thpage">5thpage</li>
</ul>
<div id="fullpage">
<div className="section " id="section0">
<div className="intro">
<p>Your Virtual Assistant</p>
<p>Free your time for the things that matter to you.</p>
<p>be part of the first release, <br/> duw out shortly</p>
Sign up today
</div>
</div>
<div className="section" id="section1">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section2">
<div id="wowslider-container1">
<div className="ws_images"><ul>
<li><img src="images/background_1.jpg" alt="Background_1" title="Background_1" id="wows1_0"/></li>
<li><img src="images/sample_1.jpg" alt="Sample_1" title="Sample_1" id="wows1_1"/></li>
<li><img src="images/sample_2.jpg" alt="javascript carousel" title="Sample_2" id="wows1_2"/></li>
<li><img src="images/sample_3.jpg" alt="Sample_3" title="Sample_3" id="wows1_3"/></li>
</ul></div>
<div className="ws_bullets"><div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div></div><div className="ws_script" >css image gallery by WOWSlider.com v8.8m</div>
<div className="ws_shadow"></div>
</div>
</div>
<div className="section" id="section3">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section4">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
</div>
</div>
);
}
}
export default App;
index.html page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.min.css">
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/examples.js"></script>
<script type="text/javascript" src="js/wowslider.js"></script>
<script type="text/javascript" src="js/script.js"></script><script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
// anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
sectionsColor: ['#4A6FB1', '#939FAA', '#323539','#4A6FB1','#939FAA'],
// scrollOverflow: true
// sectionsColor: ['', '#939FAA', '#fff','#fff','','#fff','',''],
anchors:
['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage','6thpage','7thpage','8thpage'],
menu: '#menu',
css3: true,
scrollingSpeed: 1000,
scrollOverflow: true,
fixedElements: '10',
// paddingTop: '3em',
lockAnchors: true,
// scrollBar:true,
onLeave: function(){
}
});
});
</script>
</body>
</html>

If you want to keep the revision as little as possible, try to prefix the window to external library (use as global variable)
jQuery("#wowslider-container1").wowSlider(...)
to
window.jQuery("#wowslider-container1").wowSlider(...)
Here is explanation on CRA doc.
The part I could not understand is that why you need the function
function ws_glass_parallax(d,l,m){...}
in your script.js.
But I cannot make sure it would work as expected cause that I think this is not the anticipated way to develop in react.
My suggestion, including the fullpage utilization you deployed in index.html should just move to componentDidMount() which could roughly seem as the same place as $(document).ready(function() {})
so the whole picture should be:
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
window.JQuery(this.refs.fullpageEle).fullpage({...});
window.JQuery(this.refs.wow).wowSlider({...});
}
render() {
return (
<div className="App">
<ul id="menu"> ... </ul>
<div id="fullpage" ref="fullpage" >
<div className="section" id="section0"> ... </div>
<div className="section" id="section1"> ... </div>
<div className="section" id="section2">
<div id="wowslider-container1" ref="wow">
</div>
</div>
<div className="section" id="section3"> ... </div>
<div className="section" id="section4"> ... </div>
</div>
</div>);
}
}
export default App;
Something may be new to you is ref which I add in your target element and we refer the element by it in componenetDidMount(), here is the description on official doc.
And leave index.html only including external source but not JS code.

reusable components in react.js

how to create a page with two reusable components and third "controller" component that will provide two-way communication with the first two.
Component 1 & 2 will be simple text boxes that will show the text value character count next to them. Component 3 will be a read-only textbox that will show the sum of the counts of 1&2.
Below is the code for the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="app.jsx"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<input type="text" id="Final" name="finaltextbox"/>
<script type="text/babel">
var max_chars = 0;
var App =
React.createClass({
render: function() {
return (
<div> <TwitterInput /> </div>
);
}
});
var TwitterInput =
React.createClass({
getInitialState:
function() {
return {
chars_left: max_chars
};
},
handleChange(event) {
var input = event.target.value;
this.setState({
chars_left: input.length
});
},
render: function() {
return (
<div>
<textarea onChange={this.handleChange.bind(this)}></textarea>
<p> {this.state.chars_left}</p>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('container')
);
ReactDOM.render(
<App />,
document.getElementById('container2')
);
</script>
</body>
</html>

Trying To Get User Data From GitHub API Not Sure What's Wrong

I Wrote A Peace Of Code Which If Works Expected To Get Profile Pic And User Name From GitHub API According To User Input. Console Also Not Showing Any Error.Can Any One Help Me Correct This Thanks In Advance .
This I What I Tried So Far
var Main = React.createClass({
getInitialState:function(){
return({
user:[]
});
},
addUser: function(loginToAdd) {
this.setState({user: this.state.logins.concat(loginToAdd)});
},
render: function() {
var abc = this.state.user.map(function(user){
return(
<Display user={user} key={user}/>
);
});
return (
<div>
<Form addUser={this.addUser}/>
{abc}
<hr />
</div>
)
}
});
var Form = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addUser(loginInput.value);
loginInput.value = '';
},
render:function(){
return (
<div onSubmit={this.handleSubmit}>
<input type="text" placeholder="github login" ref="login"/>
<button>Add</button>
</div>
)
}
});
var Display = React.createClass({
getInitialState:function(){
return{};
},
componentDidMount:function(){
var component = this;
$.get("https://api.github.com/users/"+this.props.user,function(data){
component.setState(data);
});
},
render: function() {
return (
<div>
<img src={this.state.avatar_url} width="80"/>
<h1>{this.state.name}</h1>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</body>
</html>
JSBin Link

div do not have an onSubmit event form do however, fix that and you should be ok

reactjs Invariant Violation

Getting this error on every browser when trying to render a simple paragraph in React:
Uncaught Error: Invariant Violation: _registerComponent(...): Target
container is not a DOM element.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<div class="container">
<p>this should not be seen</p>
</div>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script>
"use strict";
var BoxTile = React.createClass({
render: function () {
return React.createElement("p", null, "Imageine this is a tile...");
}
});
ReactDOM.render(React.createElement(BoxTile), document.getElementById('container'));
</script>
</body>
</html>

document.getElementById can not find the relevant node because container is a class attribute and not id.
Change
<div class="container">
<p>this should not be seen</p>
</div>
To
<div id="container">
<p>this should not be seen</p>
</div>

Get value from a textbox in popupbox using reactjs

I have a program which opens a dialog box on button click.
The dialog box contains : inputbox, submit and cancel button. I am just wondering how do I get the value of the input box after submitting the form. Posting code and Fiddle below.
JSBIN
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://fb.me/react-0.3.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.3.0.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="component"></div>
<script type="text/jsx">
/** #jsx React.DOM */
var DialogContent = React.createClass({
render: function(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input ref="inputText" />
<input type="submit" />
<button onClick = {this.props.closeDialog}>Cancel</button>
</form>
</div>
)
}
});
var DialogExample = React.createClass({
openDialog: function(e){
e.preventDefault();
var $dialog = $('<div>').dialog({
title: 'Example Dialog Title',
width: 400,
close: function(e){
React.unmountAndReleaseReactRootNode(this);
$( this ).remove();
}
});
var closeDialog = function(e){
e.preventDefault();
$dialog.dialog('close');
}
React.renderComponent(<DialogContent closeDialog={closeDialog} />, $dialog[0])
},
render: function(){
return(
<button onClick= {this.openDialog}>Open Dialog</button>
)
}
});
React.renderComponent(<DialogExample />, document.getElementById('component'));
</script>
</body>
</html>
Note: I am new to reactjs.

try this:
var DialogContent = React.createClass({
handleSubmit: function(e){
e.preventDefault();
},
handleClick: function(){
console.log(this.refs.inputText.getDOMNode().value)
},
render: function(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input ref="inputText" />
<input type="submit" onClick={this.handleClick.bind(this)} />
<button onClick = {this.props.closeDialog}>Cancel</button>
</form>
</div>
)
}
});
instead of console.log, you can traverse the value upwards with a function received in props.

Resources