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>
)
}
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 have an imported image file and I want to pass it into an object that is called in my app return:
import React, { Component} from 'react';
import Gallery from '../Gallery';
import About from '../imgs/work-one/about.jpg';
const IMAGES = [
{
src: WorkOne.About
}
]
class WorkOne extends Component {
render() {
return (
<section>
<Gallery images={IMAGES} />
</section>
)
}
}
export default WorkOne
import React, { Component} from 'react';
import Gallery from '../Gallery';
import About from '../imgs/work-one/about.jpg';
const IMAGES = [
{
src: About
}
]
class WorkOne extends Component {
render() {
return (
<section>
<Gallery images={IMAGES} />
</section>
)
}
}
export default WorkOne
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;
Hi the previous answers to similar Questions doesn't help me.
I have the App Component:
import React from "react";
import Header from "./components/Header";
import Menu from "./components/Menu";
import Board from "./components/Board";
class App extends React.Component {
constructor() {
super();
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
condition: true
};
}
onButtonClick() {
console.log("clicked...");
this.setState({
condition: !this.state.condition
});
}
render() {
return (
<div className="App">
<Header />
<Menu condition={this.state.condition} />
<Board />
</div>
);
}
}
export default App;
the MenuIcon Component:
import React from "react";
import "../css/main.css";
class MenuIcon extends React.Component {
render() {
return (
<div className="Menu_icon" onClick={this.props.onButtonClick}>
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
</div>
);
}
}
export default MenuIcon;
and the Menu Component
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
and the Header Component
import React from "react";
import "../css/main.css";
import MenuIcon from "./MenuIcon";
class Header extends React.Component {
render() {
return (
<div className="Header_container">
<MenuIcon onButtonClick={this.props.onButtonClick} />
<div className="Header_headline">Notes</div>
</div>
);
}
}
export default Header;
I want to trigger the onButtonClick defined in App.js every time when I click on the MenuIcon. And then the Menu should fade in or out. The animation is done with css.
I dont find my mistake?
Could someone please help me?