Very Simple code , I'hv checked react spelling, ReactDom imported, Please guide me about the error. I am new to the codding world.
import React, { Component } from "react";
import "./App.css";
import { Cardlist } from "./components/cardlist/cardlist.component.jsx";
class App extends Component {
constructor() {
super();
this.state = {
string: "Hello before",
};
}
render() {
return (
<div className="App">
<p>{this.state.string}</p>
<button onClick={() => this.setState({ string: "After text" })}>
Change text
</button>
<Cardlist name="this was prop" />
</div>
);
}
}
export default App;
Cardlist component
import react from "react";
export const Cardlist = (props) => {
console.log(props);
return <div>COngratulations</div>;
};
Try changing that react to React on first line on CardList ?
Related
Hi all I am new to React Here is my code
import React, { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
/* eslint-disable import/first */
injectTapEventPlugin();
import './App.css';
import Loginscreen from './Loginscreen'
class App extends Component {
constructor(props){
super(props);
this.state={
loginPage:[],
uploadScreen:[]
}
}
componentWillMount(){
var loginPage =[];
loginPage.push(<Loginscreen parentContext={this}/>);
this.setState({
loginPage:loginPage
})
}
render() {
return (
<div className="App">
{this.state.loginPage}
{this.state.uploadScreen}
</div>
);
}
}
const style = {
margin: 15,
};
export default App;
If i have this line in my code
/* eslint-disable import/first / (in line 5)
then i get an error
'React' must be in scope when using JSX
but if i remove
/ eslint-disable import/first */
then i get following error
Import in body of module; reorder to top import/first
Can you please help me to fix this issue? Thanks in advance
Here is my LoginScreen.js
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import Login from './Login';
class Loginscreen extends Component {
constructor(props){
super(props);
this.state={
username:'',
password:'',
loginscreen:[],
loginmessage:'',
buttonLabel:'Register',
isLogin:true
}
}
componentWillMount(){
var loginscreen=[];
loginscreen.push(<Login parentContext={this} appContext={this.props.parentContext}/>);
var loginmessage = "Not registered yet, Register Now";
this.setState({
loginscreen:loginscreen,
loginmessage:loginmessage
})
}
render() {
return (
<div className="loginscreen">
{this.state.loginscreen}
<div>
{this.state.loginmessage}
<MuiThemeProvider>
<div>
<RaisedButton label={this.state.buttonLabel} primary={true} style={style} onClick={(event) => this.handleClick(event)}/>
</div>
</MuiThemeProvider>
</div>
</div>
);
}
}
const style = {
margin: 15,
};
export default Loginscreen;
I am getting an "TypeError: this is undefined" error even after I am binding this to the function in the constructor. I have also tried to use handleChange={this.handlChange.bind(this)} instead of this.handleChange = this.handleChange.bind(this) but it doesn't work. I am watching React tutorial and I wrote the same code as the tutor did, the code is working fine in his IDE but is showing error in mine.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import './css/App.css';
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"
class App extends React.Component {
render(){
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
}
export default App;
MainContent.js
import React, {Component} from "react"
import ListItem from "./ListItem"
import tasks from "./tasks"
class MainContent extends Component
{
constructor()
{
super()
this.state =
{
tasks: tasks
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(completed)
{
alert(completed)
}
render()
{
const taskComponents = this.state.tasks.map(function(data)
{
return <ListItem key={data.id} task={data.task} completed={data.completed} handleChange={this.handleChange} />
})
return (
<div>
{taskComponents}
</div>
)
}
}
ListItem.js
import React from "react"
let i=1;
class ListItem extends React.Component
{
render()
{
return (
<div>
<p style={{color : i%2 ? "black" : "orange"}}>
<input type="checkbox" checked={this.props.completed}
onChange={function(){
this.props.handleChange(this.props.completed)
}}>
</input> Task {i++} : <b>{this.props.task}</b>
</p>
</div>
)
}
}
export default ListItem
I've read the articles on here on how to do this and have chosen the withRouter(({ history }) => history.push("/")); method, but my code below isn't working.. What am I doing wrong?
import React from "react";
import SearchBox from "./SearchBox";
import { withRouter } from "react-router-dom";
class SearchParams extends React.Component {
handleSearchSubmit() {
withRouter(({ history }) => history.push("/"));
}
render() {
return (
<div className="search-route">
<SearchBox search={this.handleSearchSubmit} />
</div>
);
}
}
export default SearchParams;
withRouter is a higher order component which takes a component as first argument and will make it so that component gets the history added to its regular props.
You can instead use it on the component when you export it, and access the history from this.props.history.
class SearchParams extends React.Component {
handleSearchSubmit = () => {
this.props.history.push("/");
};
render() {
return (
<div className="search-route">
<SearchBox search={this.handleSearchSubmit} />
</div>
);
}
}
export default withRouter(SearchParams);
I have a FileDrop component, then I use enzyme to test it doesn't render the component correctly and the output is
<Route render={[Function: render]} />
Following is my component:
import React from "react";
import Dropzone from "react-dropzone";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { dropFiles} from "../../actions/fileActions";
class FileDrop extends React.Component {
constructor(props) {
super(props);
this.onDrop = this.onDrop.bind(this);
}
onDrop(accepted, rejected) {
this.props.dispatch(dropFiles(accepted));
}
getInnerContent(filename) {
return (
<span className="filename-text">
<i className="fa fa-3x fa-files-o" /> {filename ? filename : "Click or drag and drop a CSV file here to upload."}
</span>
);
}
render() {
return (
<Dropzone multiple={false} onDrop={this.onDrop} className="drop" activeClassName="active-drop" rejectClassName="reject-drop" accept=".csv">
<div className="drop-inner">{this.getInnerContent(this.props.droppedFiles.length != 0 ? this.props.droppedFiles[0].name : null)}</div>
</Dropzone>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
droppedFiles: state.files.droppedFiles
};
};
export default withRouter(connect(mapStateToProps)(FileDrop));
And following is my FileDropSpec.js
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import FileDrop from '../../../public/scripts/components/fileupload/FileDrop';
describe('<FileDrop/>', function() {
it('should have an input to upload files', function () {
const wrapper = shallow(<FileDrop/>);
console.log(wrapper.debug());
expect(wrapper.find('input')).to.have.length(1);
});
})
This is correct, shallow renders only first lvl of your component tree. And in your case this is withRouter Hoc, for you component test use mount or export file drop component directly.
export class FileDrop extends React.Component {
and use it instead of default export for test with shallow.
http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html
I have two js files Child.js and App.js.
Child.js
import React from 'react';
const Child = (props) =>{
<div>
<button onClick={props.doWhatever}>{props.title}</button>
</div>
}
export default Child;
App.js
import React, { Component } from 'react';
import './App.css';
import Child from './components/parentTochild/Child.js'
class App extends Component {
state = {
title : 'Helloooo'
}
changeWorld = (newTitle) => {
this.setState = ({
title : newTitle
});
}
render() {
return (
<div className="App">
<Child doWhatever={this.changeWorld.bind(this , 'New world')} title={this.state.title}/>
</div>
);
}
}
export default App;
While executing this code I'm getting the error mentioned in the title. I have tried to solve it. But I couldn't figure out what's the problem with this code.
When I removed <Child doWhatever={this.changeWorld.bind(this , 'New world')} title={this.state.title}/> and typed a text it showed on screen. The problem is when using the Child component.
You should return some thing from child component.
import React from 'react';
const Child = (props) =>{
return (
<div>
<button onClick={(event)=>props.doWhatever('New world')}>{props.title}</button>
</div>
);
}
export default Child;
Updated:
If you want to send a text with the event handler to you can do this :
import React, { Component } from 'react';
import './App.css';
import Child from './components/parentTochild/Child.js'
class App extends Component {
constructor(props){
super(props);
this.state={
title : 'Helloooo'
};
this.changeWorld=this.changeWorld.bind(this);
}
changeWorld = (newTitle) => {
this.setState = ({
title : newTitle
});
}
render() {
return (
<div className="App">
<Child doWhatever={this.changeWorld} title={this.state.title}/>
</div>
);
}
}
export default App;