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;
Related
I want use consloe to call function like js, but consloe display "Uncaught ReferenceError: isDebug is not defined at :1:1".
SalesKpi.tsx
import * as React from 'react';
import styles from './SalesKpi.module.scss';
import './SalesKpi.css';
import { ISalesKpiProps } from './ISalesKpiProps';
import { escape } from '#microsoft/sp-lodash-subset';
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
export default class SalesKpi extends React.Component<ISalesKpiProps, {show: boolean;}> {
public constructor(props) {
super(props);
this.state = {
show: false
}
}
public debug(){
this.setState({show: true})
}
public render(): React.ReactElement<ISalesKpiProps> {
return (
<div className="row">
{this.state.show &&
<div className="col">
.................
</div>
}
</div>
)
}
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 ?
Trying to write an example code on using #material-ui, but the following error always persists, given #material-ui is included in the code.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Box from '#material-ui/core/Box';
import Button from '#material-ui/core/Button';
interface AppProps { }
interface AppState {
name: string;
}
class App extends Component<AppProps, AppState> {
constructor(props) {
super(props);
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<Box color="text.primary" clone>
<Button />
</Box>
<Hello name={this.state.name} />
<p>
Start editing to see some magic happen :)
</p>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-ts-oed5mf
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 created simple test class for form SearchForm.js
import React from 'react';
import ReactDOM from 'react-dom';
const formContainer = document.querySelector('.form-container')
class SeacrhForm extends React.Component {
constructor(props) {
super(props)
this.state = {
keywords: '',
city: '',
date: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
render() {
return (
<form className='search-form' onSubmit={this.handleSubmit}>
<h1>Say Hi!</h1>
</form>
)
}
}
//ReactDOM.render(<SeacrhForm />, formContainer)
It's my App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './SearchForm.js';
class App extends React.Component {
render() {
return (
<div className="form-container">Test
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
But I don't understand how to render my form in App.js ?
Render SearchForm in App.js and import it like import { SearchForm } from './SearchForm.js';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { SearchForm } from './SearchForm.js';
class App extends React.Component {
render() {
return (
<div className="form-container">Test
<SearchForm />
</div>
);
}
}
export default App;
and export it from the SeachForm file after correcting the typo,
class SearchForm extends React.Component {
constructor(props) {
super(props)
this.state = {
keywords: '',
city: '',
date: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
render() {
return (
<form className='search-form' onSubmit={this.handleSubmit}>
<h1>Say Hi!</h1>
</form>
)
}
}
export { SearchForm}
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './SearchForm.js';
class App extends React.Component {
render() {
return (
<div className="form-container">
<SearchForm />
</div>
);
}
}
export default App;