Upgrading this example to React.js 0.14 .....
I am receiving an error when toggling:
Uncaught TypeError: Cannot read property 'setState' of null
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { Link } from 'react-router';
export default class TreeNode extends Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
render() {
let childNodes;
let classObj;
if (this.props.node.childNodes !== undefined) {
childNodes = this.props.node.childNodes.map((node, index) => {
return (
<li key={ index }><TreeNode node={ node } /></li>
);
});
}
classObj = classNames({
'togglable': true,
'togglable-down': this.state.visible,
'togglable-up': !this.state.visible
});
let style;
if (!this.state.visible) {
style = { display: 'none' };
}
return (
<div>
<h5 onClick={ this.toggle } className={ classObj }>
{ this.props.node.title }
</h5>
<ul style={ style } >
{ childNodes }
</ul>
</div>
);
}
toggle() {
this.setState({ visible: !this.state.visible });
}
}
TreeNode.propTypes = {
node: React.PropTypes.object
};
ReactDOM.render(<TreeNode node={ treeData } />, document.querySelector('#reactRoot'));
Anyone see my error?
Many thanks in advance if you can point it out.
Nevermind, dumb, dumb, dumb .....
<h5 onClick={ this.toggle.bind(this) } className={ classObj }>
Related
I'm trying to do this example of react popout but it doesn't seem to be working.
https://github.com/JakeGinnivan/react-popout#readme
example is at the bottom.
import React from "react"
import Popout from "react-popout"
class PopupLogin extends React.Component {
constructor(props) {
super(props);
this.popout = this.popout.bind(this);
this.popoutClosed = this.popoutClosed.bind(this);
this.state = { isPoppedOut: false };
}
popout() {
this.setState({isPoppedOut: true});
}
popoutClosed() {
this.setState({isPoppedOut: false});
}
render() {
if (this.state.isPoppedOut) {
return (
<Popout title='Window title' onClosing={this.popoutClosed}>
<div>Popped out content!</div>
</Popout>
);
} else {
var popout = <span onClick={this.popout} className="buttonGlyphicon glyphicon glyphicon-export"></span>
return (
<div>
<strong>Section {popout}</strong>
<div>Inline content</div>
</div>
);
}
}
}
export default PopupLogin
This is supposed to look like http://jake.ginnivan.net/react-popout/ this.
But in my output looks like this.
You forgot to add a text to the span ,according to their docs, so as a result there was no link, hence no onClick was fired. You could style the link as per your needs
Sandbox: https://codesandbox.io/s/react-example-vxtu9
import React from "react";
import Popout from "react-popout";
import ReactDOM from "react-dom";
class PopupLogin extends React.Component {
constructor(props) {
super(props);
this.popout = this.popout.bind(this);
this.popoutClosed = this.popoutClosed.bind(this);
this.state = { isPoppedOut: false };
}
popout() {
this.setState({ isPoppedOut: true });
}
popoutClosed() {
this.setState({ isPoppedOut: false });
}
render() {
if (this.state.isPoppedOut) {
return (
<Popout
url="popout.html"
title="Window title"
onClosing={this.popoutClosed}
>
<div>Popped out content!</div>
</Popout>
);
} else {
var popout = (
<span
onClick={this.popout}
className="buttonGlyphicon glyphicon glyphicon-export"
>
Open
</span>
);
return (
<div>
<strong>Section {popout}</strong>
<div>Inline content</div>
</div>
);
}
}
}
ReactDOM.render(<PopupLogin />, document.getElementById("root"));
It looks like the code in documentation missing the text. Add (pop window out) in the popout.
import React from "react";
import Popout from "react-popout";
class PopupLogin extends React.Component {
constructor(props) {
super(props);
this.popout = this.popout.bind(this);
this.popoutClosed = this.popoutClosed.bind(this);
this.state = { isPoppedOut: false };
}
popout() {
this.setState({ isPoppedOut: true });
}
popoutClosed() {
this.setState({ isPoppedOut: false });
}
render() {
if (this.state.isPoppedOut) {
return (
<Popout title="Window title" onClosing={this.popoutClosed}>
<div>Popped out content!</div>
</Popout>
);
} else {
var popout = (
<span
onClick={this.popout}
className="buttonGlyphicon glyphicon glyphicon-export"
>
<a
style={{
textDecoration: "underline",
color: "blue",
cursor: "pointer"
}}
onClick={this.popout}
>
(pop window out)
</a>
</span>
);
return (
<div>
<strong>Section {popout}</strong>
<div>Inline content</div>
</div>
);
}
}
}
export default PopupLogin;
I am new here in react js, I want to open modal on click of edit button, but it gives me error 'App' is not defined react/jsx-no-undef, Can anyone please help why i am getting that error ? On click of edit button it is call editTask function, and from that function it call toggleModal()function here i have added my full code here, anyhelp will be really appreciated
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './modal.js';
class PalladiumHub extends React.Component {
render() {
return (<tr>
<td>{this.props.keyuser}</td>
<td>{this.props.name.name}</td>
<td><button type="button" onClick={(e) => { this.props.editTask(this.props.index) }} >Edit</button><button onClick={(e) => { this.props.deleteTask(this.props.index) }}>Delete</button></td>
</tr>
)
}
} //{} {}
class CallCRUD extends React.Component {
constructor(props) {
super(props);
this.deleteTask = this.deleteTask.bind(this);
this.editTask = this.editTask.bind(this);
this.state = {
error: null,
isLoaded: false,
items: [],
isOpen: false
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
toggleModal() {
return <App openModal = {this.openModal} />;
}
deleteTask(index) {
alert(index);
console.log(index);
//return false;
let tasks = this.state.items;
tasks.splice(index, 1);
this.setState({
items: tasks
})
}
editTask(index) {
this.toggleModal();
console.log(index);
}
render() {
console.log(this.state.items);
return (<table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
this.state.items.map((data, index) => {
//return console.log(data.id);
return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} />
})
}
</table>
);
}
}
ReactDOM.render(
<CallCRUD />, document.getElementById('root')
);
modal.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Modal from 'react-modal';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
//Modal.setAppElement('#root')
class App extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
afterOpenModal() {
// references are now sync'd and can be accessed.
this.subtitle.style.color = '#f00';
}
closeModal() {
this.setState({modalIsOpen: false});
}
render() {
return (
<div>
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
}
}
It looks like you dont have App imported into your PalladiumHub and CallCRUD file. It's just saying that Reacy doesnt know where App is coming from.
I'm attempting to consume a JSON API using fetch; the error mentioned above appears on the following line: **this.state.data.map( (dynamicData,key)=>**
This is my ReactJS code with the error line in bold:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
//constructor
constructor() {
super();
this.state = {
data: [],
}
} //end constructor
componentDidMount(){
return fetch('https://jsonplaceholder.typicode.com/todos')
.then((response)=>response.json())
.then((responseJson)=>
{
this.setState({
data:responseJson.todos
})
console.log(this.state.data)
})
} // end component did mount
render() {
return (
<div>
<h2>Todo:</h2>
<div>
{
**this.state.data.map( (dynamicData,key)=>**
<div>
<span> {dynamicData.userId} </span>
<span> {dynamicData.id} </span>
</div>
)
}
</div>
</div>
);
}
}
export default App;
Could I get some help as to what I'm doing wrong? Thanks in advance
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
state = {
data:[],
url: "https://jsonplaceholder.typicode.com/todos"
};
componentDidMount() {
fetch(this.state.url)
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
const { data } = this.state;
data && console.log(data);
return (
<div>
{data &&
data.map(item => <div> Hello User With Id: {item.userId} </div>)}
</div>
);
}
}
render(<App />, document.getElementById("root"));
Your didMount should look like mine also, setState takes a callback so if you wanted to see what the data looked like it would be like this
this.setState({ data }, () => console.log(this.state.data))
In your render it looks like you forgot the parenthesis after the arrow function in map.
render() {
return (
<div>
<h2>Todo:</h2>
<div>
{
this.state.data.map((dynamicData,key)=> (
<div>
<span> {dynamicData.userId} </span>
<span> {dynamicData.id} </span>
</div>
))
}
</div>
</div>
);
}
I'm having troubles wrapping my head around this. I'm trying to show/hide text inside one of my components, but I'm not able to do it. I get I was clicked! message so I know the function is being passed down. What am I missing?
Do I also need to declare a visibility CSS declaration, maybe that's what I'm missing?
SnippetList.jsx
import React, { Component, PropTypes } from 'react'
import { createContainer } from 'meteor/react-meteor-data';
import Snippet from './snippet'
import { Snippets } from '../../../api/collections/snippets.js'
class SnippetList extends React.Component {
constructor(props) {
super(props);
this.state = { visible: false }
this.toggleVisible = this.toggleVisible.bind(this);
}
toggleVisible() {
this.setState( { visible: !this.state.visible } )
console.log('I was clicked');
}
renderSnippets() {
return this.props.snippets.map( (snippet) => (
<Snippet
key={snippet._id}
title={snippet.title}
content={snippet.content}
onClick={this.toggleVisible}
/>
));
}
render() {
const snippets = Snippets.find({}).fetch({});
return (
snippets.length > 0
?
<ul>{this.renderSnippets()}</ul>
:
<p>No Snippets at this time</p>
)
}
}
SnippetList.propTypes = {
snippets: PropTypes.array.isRequired,
}
export default createContainer(() => {
Meteor.subscribe('snippets');
return {
snippets: Snippets.find({}).fetch()
};
}, SnippetList);
Snippet.jsx
import React, { Component, PropTypes } from 'react'
export default class Snippet extends React.Component {
render() {
const visible = this.props.toggleVisible
return (
<article>
<header>
<h1 className='Snippet-title'>{this.props.title}</h1>
</header>
<div className={visible ? 'show' : 'hidden'} onClick={this.props.onClick}>
<p className='Snippet-content'>{this.props.content}</p>
</div>
</article>
)
}
}
Snippet.propTypes = {
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
// toggleVisible: PropTypes.func.isRequired
}
the issue is you aren't passing the hide part as a prop.
in Snippet you do const visible = this.props.toggleVisible but... toggleVisible isn't passed to your Snippet component thus its always undefined
return this.props.snippets.map( (snippet) => (
<Snippet
key={snippet._id}
title={snippet.title}
content={snippet.content}
onClick={this.toggleVisible}
/>
));
add toggleVisible... aka change to this.
return this.props.snippets.map( (snippet) => (
<Snippet
key={snippet._id}
title={snippet.title}
content={snippet.content}
toggleVisible={this.state.visible}
onClick={this.toggleVisible}
/>
));
you should probably also bind your renderSnippets this to the class as well... meaning add this to your constructor this.renderSnippets = this.renderSnippets.bind(this);
Now to talk about your code, why are you rendering a <ul> as the parent of a <article> ? the child of a ul should be a <li> I would refactor your components to be more like this.
class SnippetList extends React.Component {
constructor(props) {
super(props);
this.state = { visible: false };
this.toggleVisible = this.toggleVisible.bind(this);
this.renderSnippets = this.renderSnippets.bind(this);
}
toggleVisible() {
this.setState( { visible: !this.state.visible } )
console.log('I was clicked');
}
renderSnippets() {
return this.props.snippets.map( (snippet) => (
<Snippet
key={snippet._id}
title={snippet.title}
content={snippet.content}
toggleVisible={this.state.visible}
onClick={this.toggleVisible}
/>
));
}
render() {
const snippets = Snippets.find({}).fetch({});
return (
snippets.length > 0
? <ul>{this.renderSnippets()}</ul>
: <p>No Snippets at this time</p>
)
}
}
export default class Snippet extends React.Component {
render() {
const {toggleVisible: visible} = this.props;
return (
<li>
<article>
<header>
<h1 className="Snippet-title">{this.props.title}</h1>
</header>
<div onClick={this.props.onClick}>
<p className={visible ? 'show Snippet-content' : 'hidden Snippet-content'}>{this.props.content}</p>
</div>
</article>
</li>
)
}
}
I have the problem when I use the Reactjs, I'm really new to Reactjs, so maybe it's a easy problem
I want to use the class ClickButton in the UserInfo,but I don't know how to change the name through props
import React, { PropTypes } from 'react';
import { Button } from 'antd';
import { connect } from 'react-redux';
import styles from './ClickButton.less';
const ClickButton = ({ todos,dispatch }) => {
const userinforclick = () => {
dispatch({
type: 'todos/clickbutton',
payload: !todos['click_button'],
});
};
return (
<span>
< span type="primary" className={ styles.show } onClick={ userinforclick.bind(this) } > {this.props.name} < /span >
</span>
);
};
function clickbutton({ todos }){
return{
todos:todos,
}
}
export default connect(clickbutton)(ClickButton)
and i use the ClickButton in UserInfo:
import React from 'react'
import styles from './Userinfo.less'
import ClickButton from '../../components/Button/ClickButton'
import { connect } from 'react-redux';
import { Spin } from 'antd'
const Userinfo = ({ todos,dispatch }) => {
const { userinfo, userinfoloading, click_button } = todos;
if(userinfoloading) {
return <Spin />;
}
const renderList = () => {
return(
<div className={ styles.userInfodiv}>
<div>
<span className={ styles.userInfoTitle }>userinfo</span>
</div>
<div className = { styles.slice }></div>
<div className = { styles.userInfoBody}>
<div className = { styles.userInfoSubBody }>
<span>username：</span>
<span>{userinfo[0]['username']}</span>
</div>
<div className = { styles.userInfoSubBody }>
<span>number：</span>
{ click_button ? <span>{userinfo[0]['phone']}</span> : <input type="text" value={userinfo[0]['phone']} /> }
<ClickButton name="john" />
</div>
</div>
</div>
);
};
return (
<div>
{ renderList() }
</div>
);
};
function mapStateToProps({ todos }) {
return {
todos: todos,
};
}
export default connect(mapStateToProps)(Userinfo);
Here's something that actually works (although I removed the todos and such but you can add them in easily):
class RenderList extends React.Component {
render() {
return (<span> {this.props.name} </span>);
}
}
class App extends React.Component {
render() {
return (<div>
<RenderList name="John"/>
</div>)
}
}
ReactDOM.render(<App/>,document.getElementById("app"));