I've installed draft-js using npm and yarn. The installation seems to have been completed fine. Below is the code for my react component:
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
}
}
onChange = (editorState) => {
this.setState({
editorState,
});
}
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
/>
</div>
);
}
}
export default MyEditor;
Trying to render it in my view using react-rails gem helper as below:
<%= react_component("MyEditor") %>
Still don't see anything in my view. Don't see any errors in the browser developer console or rails console. Using Webpacker for packaging.
Any suggestions out there?
Related
I'm trying to import /app/javascript/components/Videochat.js into app/javascript/packs/index.js but getting the error module not found Can't resolve Videochat ...
index.js:
import React from 'react'
import ReactDom from 'react-dom'
import Videochat from '../components/Videochat'
document.addEventListener('DOMContentLoaded', () => {
ReactDom.render(
<Videochat/>,
document.body.appendChild(document.createElement('div')),
)
})
Videochat.js
import React, { Component } from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom"
import CreateRoom from "./routes/CreateRoom"
import Room from "./routes/Room"
class Videochat extends React.Component {
render () {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={CreateRoom} />
<Route path="/room/:roomID" component={Room} />
</Switch>
</BrowserRouter>
)
}
}
export default Videochat
I solved this by changing the component name from Videochat to App
It seems the presence of App.js in the components folder is of great significance In my case I was importing the Videochat component but not the App component even though it was present
the code below is one of my component.
i am creating this with Ruby on Rails framework, with react_rails gem and webpacker, experimenting on Material UI.
as you can see, i am changing the Material UI default font theme with my own choice of font. below code is a success.
my question is, do i have to repeat this step for all my component?
importing createMuiTheme, stating the theme const, and wrapping <MuiThemeProvider /> in every render?
is there a single way to do this universally, without repeating in all component?
thanks for the advice.
import React from 'react';
import PropTypes from 'prop-types';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
import Popover from '#material-ui/core/Popover';
import Typography from '#material-ui/core/Typography';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemText from '#material-ui/core/ListItemText';
import Avatar from '#material-ui/core/Avatar';
import EmailIcon from '#material-ui/icons/Email';
import HomeIcon from '#material-ui/icons/Home';
import PersonIcon from '#material-ui/icons/Person';
import { MuiThemeProvider, createMuiTheme, withStyles } from '#material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: 'Bebas',
},
});
export class SimpleCard extends React.Component {
render () {
return (
<div >
<MuiThemeProvider theme={theme}>
<Card raised="true">
<CardContent >
<List>
<ListItem>
<Avatar>
<EmailIcon />
</Avatar>
<ListItemText primary="Email" secondary={this.props.order.order_mail} />
</ListItem>
</List>
</CardContent>
</Card>
</MuiThemeProvider>
</div>
);
}
}
export default withStyles(styles)(SimpleCard);
Did you try wrapping the MuiThemeProvider around the entire site/app? This is what I do in React.js. I set up my theme in the root file and wrap it around the entire component
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Components
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Login from "./components/auth/Login";
import Dashboard from "./components/dashboard/Dashboard";
// Styles
import "./stylesheets/App.css";
import {
MuiThemeProvider,
createMuiTheme,
withTheme
} from "#material-ui/core/styles";
import { grey } from "#material-ui/core/colors";
import { withStyles } from "#material-ui/core";
const theme = createMuiTheme({
overrides: {
MuiGrid: {
container: {
width: "100%",
margin: "0"
}
}
},
palette: {
primary: {
light: "#c146b1",
main: "#8e0081",
dark: "#5c0054",
contrastText: "#ffffff"
},
secondary: {
light: "#6bffff",
main: "#00eae3",
dark: "#00b7b1",
contrastText: "#000000"
}
}
});
const drawerWidth = 240;
const styles = theme => ({
app: {
backgroundColor: grey[200]
},
drawerOpen: {
marginLeft: 0
},
drawerClosed: {
marginLeft: -drawerWidth
}
});
class App extends Component {
constructor() {
super();
this.state = {
navOpen: false
};
}
toggleDrawer = () => {
this.setState({
navOpen: !this.state.navOpen
});
};
render() {
const { classes } = this.props;
return (
<MuiThemeProvider theme={theme}>
<div className={classes.app}>
<Navbar
toggleDrawer={this.toggleDrawer}
navOpen={this.state.navOpen}
/>
<Route exact path="/" component={Dashboard} />
<Route exact path="/register" component={PatientRegister} />
<Route exact path="/login" component={Login} />
<Footer />
</div>
</Router>
</MuiThemeProvider>
);
}
}
export default withTheme(theme)(withStyles(styles)(App));
This is an example of my component that will be rendered in the root div (aka the entire application). Notice how wraps the entire app? I stripped a lot out to make it simpler to understand, but if you are using Redux (which is awesome) then I would recommend having that as your outer wrapper, and the rest inside of that. In other words:
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<div class="App">
// Your App Here
</div>
</MuiThemeProvider>
</Provider>
I'm trying to follow the steps provided by Ant design documentation, but I get an error:
TypeError: Cannot read property 'getFieldDecorator' of undefined
import React, { Component } from 'react'
import ReactDom from 'react-dom'
import { Icon, Input, Form} from 'antd'
//
import Header from './layout/Header'
// Import Css
import '../css/Home.css'
class Home extends Component {
render() {
const { getFieldDecorator } = this.props.form
return (
<div>
<Form>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
)}
</Form>
</div>
)
}
}
const WrappedLogin = Form.create()(Home)
ReactDom.render(<WrappedLogin/>, document.getElementById('root'))
export default Home
Did I miss anything?
FYI
antd: 3.1.0
react: 16.2.0
react-dom: 16.2.0
Remark
console.log(this.props.form) // ** return getFieldDecorator: f()
In my case it worked to match the exported identified to the const
export default WrappedLogin
Maybe you use Home at other module?
try:
export default WrappedLogin => export default WrappedLogin
hi my dear friends i have problem in my simple code in react native
when i run the code i` giving this error. apologize i'm nub in react native :)
import React, { Component } from 'react';
import {
ListView,
View
} from 'react-native';
import MyPresentationalComponent1 from './MyPresentationalComponent1'
export default class MyContainerComponent extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==
r2});
this.state = {
dataSource: ds.cloneWithRows([
'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7',
'Item8',
'Item9', 'Item10'
])
};
}
render() {
return (
<View>
<MyPresentationalComponent1 dataSource = {this.state.dataSource}/>
</View>
);
}
}`
I've looked at many different Stack Overflow posts about how to navigate screens in React Native but none of them seem to be working, perhaps because those posts were for older versions of React Native. Here is my code with the irrelevant parts taken out below. I'm trying to navigate from this screen to another screen called SubTasks. I made sure to say export default class SubTasks extends React.Component in SubTasks.js, by the way. The error I'm getting when I click on the button is "undefined is not an object (evaluating this.props.navigator.push'). Does anyone know where my error may be?
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button}
from 'react-native';
import SubTasks from './SubTasks';
export default class App extends React.Component {
constructor(props) {
super(props);
}
renderScene(route, navigator) {
if(route.name == 'SubTasks') {
return <SubTasks navigator = {navigator} />
}
}
_navigate() {
this.props.navigator.push({
title: 'SubTasks',
})
}
render() {
return (
<View>
<NavigatorIOS
initialRoute= {{
title: 'SubTasks',
component: SubTasks,
}}
style = {{ flex: 1 }}
/>
<Button
title= 'SubTasks'
style = {{flexDirection: 'row', fontSize: 20, alignItems: 'flex-end'}}
color = 'blue'
onPress= {() => this._navigate()}>
styleDisabled = {{color: 'red'}}
</Button>
</View>
)}
}
Make sure you bind your _navigate function in your constructor:
constructor(props) {
super(props);
this._navigate = this._navigate.bind(this);
}
Or consider using arrow function
_navigate = () => {
this.props.navigator.push({
title: 'SubTasks',
})
}