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;
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>
)
}
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;
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´m having troubles making the Input from the text area go to the Marked interpreter (getting a TypeError: Cannot read property 'value' of null). Any ideas on how to fix it?
Text area input:
import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Some markdown text.'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
createMarkup()
{
return {__html: marked(this.state.value)};
}
render() {
return (
<div>
<textarea value={this.state.value} onChange={this.handleChange}/>
<MarkdownExample />
</div>
);
}
}
Previewer:
import React, { Component } from 'react';
import './App.css';
import marked from "marked";
class MarkdownExample extends React.Component {
getMarkdownText(props) {
var rawMarkup = marked(this.state.value, {sanitize: true});
return { __html: rawMarkup };
}
render() {
return <div dangerouslySetInnerHTML={this.state.value.getMarkdownText()} />
}
}
export default MarkdownExample;
You cannot access state directly from parent, but you can pass the prop to the child
import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Some markdown text.'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
createMarkup()
{
return {__html: marked(this.state.value)};
}
render() {
return (
<div>
<textarea value={this.state.value} onChange={this.handleChange}/>
<MarkdownExample parentValue={this.state.value}/>
</div>
);
}
}
Previewers:
import React, { Component } from 'react';
import './App.css';
import marked from "marked";
class MarkdownExample extends React.Component {
getMarkdownText() {
var rawMarkup = marked(this.props.parentValue, {sanitize: true});
return { __html: rawMarkup };
}
render() {
return <div dangerouslySetInnerHTML={this.getMarkdownText()} />
}
}
export default MarkdownExample;