ReactJS + MaterialUI. Property rightIconButton doesn't work - javascript

I hope, that you can help me with my problem. I can't understand, why property rightIconButton in my example of <ListItem> doesn't work (Material UI component).
<List>
import React from 'react';
import { List } from 'material-ui';
import UsersItem from './UsersItem';
class UsersList extends React.Component {
render() {
return <List>
{this.props.users.map(user => {
return <UsersItem key={user.id} deleteUser={this.props.deleteUser}
user={user}/>
})}
</List>;
}
}
export default UsersList;
<ListItem>
import React from 'react';
import { ListItem, IconButton, Avatar, FontIcon } from 'material-ui';
class UsersItem extends React.Component {
constructor() {
super();
this.deleteUser = this.deleteUser.bind(this);
}
deleteUser(e) {
this.props.deleteUser(this.props.user.id);
e.stopPropagation();
}
render() {
let deleteButton = <IconButton iconClassName="icomoon-icon-delete"
onClick={this.deleteUser}>
</IconButton>;
return <ListItem className="user-item" secondaryText={this.props.user.description}
leftAvatar={<Avatar src="./web/images/avatar.jpg" />}
rightIconButton={deleteButton} secondaryTextLines={2}>
tt { this.props.user.name }
</ListItem>
}
}
export default UsersItem;
Font icon is correct and if I place it on <Toolbar>, it render correct. But it doesn't render in property rightIconButton. I tried SVG icon too from source code on official site of MaterialUI.
Screenshot of result site page (to small reputation for third link) https://github.com/jestonedev/Auction/blob/master/issue.png
What I doing incorrect? Why rightIconButton doesn't work?

In deleteButton > onClick, you are missing to bind this context:
onClick={this.deleteUser.bind(this)}
This is necessary when using the es6 class syntax.

Related

How to use React-native-super-grid as a Component

import { FlatGrid } from 'react-native-super-grid';
class Grid extends React.Component () {
export default function Example() {
I just write until here..
But, don't work...
What I have to do ..
You have to return a valid response from the component. For example, if you want to make a Component using FlatGrid you can use this structure:
import { View } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
export default function Example() {
return(
<View>
<FlatGrid
itemDimension={130}
data={[1,2,3,4,5,6]}
renderItem={({ item }) => (<Text>{item}</Text>)}
/>
</View>
)
}
And also I see you are using a class class named Grid that is extending the React.Component () and from your code I see you are not importing the React from react so in order to use the class you have to use:
import React from 'react';
import { View } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
export default class Grid extends React.Compoment {
render(){
return(
<View>
<FlatGrid
itemDimension={130}
data={[1,2,3,4,5,6]}
renderItem={({ item }) => (<Text>{item}</Text>)}
/>
</View>
)
}
}

Cannot access {variable-name} before initialization (React import)

I'm getting a Reference Error
Cannot access 'STRUCTURE_COLUMN_ID' before initialization
I have a structureColumn file which contains the following:
import React from 'react';
import Column from './column';
export const STRUCTURE_COLUMN_ID = 'Structure';
export default class StructureColumn extends Column {
constructor(name) {
super(STRUCTURE_COLUMN_ID);
}
clone() {
return new StructureColumn(this.name);
}
getKey() {
return STRUCTURE_COLUMN_ID;
}
}
When trying to access StructureColumn class or STRUCTURE_COLUMN_ID variable from a component I get the mentioned error.
The component looks the following:
import React from 'react';
import { List, ListItem, Tooltip } from '#material-ui/core';
import { STRUCTURE_COLUMN_ID } from '../../../../models/structureColumn';
console.log(STRUCTURE_COLUMN_ID);
const CustomColumnsList = ({ onSelect }) => {
return (
<List>
{Object.values({}).map(col => (
<Tooltip title={col.description}>
<ListItem onClick={() => onSelect(col.column)} button>
{col.name}
</ListItem>
</Tooltip>
))}
</List>
);
};
export default CustomColumnsList;
I can use the variable inside the functional component body but the thing is I wanted to create a constant variable out of it's scope. Never seen this issue before in React. Someone has an experience dealing with it?

Material-UI AppBar click is not working in react

I'm trying some things in react. I'm rendering the AppBar and the Drawer from v0 Material-UI as functional components. I have added the handleDrawerClick function in the class and sending the function as a props to use as a click function in the functional component. But the click function is not working. The problem here is wrapping up the function as the param and passing it as props might not be working. If there's any other way to achieve the click any help would be appreciated but we need to make sure that we're using the fancy components in the functional components and rendering those in the class just like shown in the Demo. onLeftIconButtonClick, the drawer open and closing needs to get controlled.
I have added one working demo here through stackblitz => Working Demo
Here's my code:
import React, { Component } from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import './style.css';
export const getMenuBar = (isBarOpened) => {
return(
<Drawer open={isBarOpened}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
);
}
export const getAppBar = (handleDrawerClick) => {
return(
<AppBar
title="My AppBar"
className="st_appBarClass"
titleStyle={{ color: "#FFFFFF" }}
onLeftIconButtonClick={handleDrawerClick()}
/>
);
}
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
isMenuOpened: false
};
}
handleDrawerClick = (e) => {
console.log(e);
if(e) {
this.setState({ isMenuOpened: !this.state.isMenuOpened });
}
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<div className='product-list-wrapper'>
{/*<ProductList products={products} />*/}
{getAppBar(this.handleDrawerClick)}
{getMenuBar(this.state.isMenuOpened)}
</div>
</MuiThemeProvider>
)
}
}
render(<App />, document.getElementById('root'));
export const getAppBar = (handleDrawerClick) => {
return(
<AppBar
title="My AppBar"
className="st_appBarClass"
titleStyle={{ color: "#FFFFFF" }}
onLeftIconButtonClick={handleDrawerClick} //Remove ()
/>
);
}
To open menu remove unnecessary round brackets
<AppBar
title="My AppBar"
className="st_appBarClass"
titleStyle={{ color: "#FFFFFF" }}
onLeftIconButtonClick={handleDrawerClick}//<---here
/>
To close menu provide an onClick to the parent div
<div onClick={this.handleDrawerClick} className='product-list-wrapper'> //<----here
{/*<ProductList products={products} />*/}
{getAppBar(this.handleDrawerClick)}
{getMenuBar(this.state.isMenuOpened)}
</div>

Is there any error in my code because of which My collapse component is not working?

I was creating a reactjs web-app and I wanted to use collapse feature in it. So I installed reactstrap dependancy and import "Collapse" component from there. But its not working in my code.
import { Component } from "react";
import React from "react";
import { Collapse, Navbar } from "reactstrap";
class Main extends Component {
constructor(props) {
super(props);
this.state = {
open: false
};
}
show() {
this.setState({
open: !this.state.open
});
}
render() {
return (
<>
<button onClick={() => this.show()}>Show</button>
<Collapse isOpen={this.state.open}>
<Navbar>hello</Navbar>
</Collapse>
</>
);
}
}
export default Main;
Check out the demohere.
Add import 'bootstrap/dist/css/bootstrap.min.css'; in your index.js file.

Functions are not valid as a React child. - Functional Components in React

I am currently trying to integrate Patternfly React in my project. This is the link im using for reference which is working fine. But need to have separate component for header , footer , topnav and sidenav. So while partitioning the code in to components im getting issue as
Invalid prop nav supplied to PageSidebar, expected a ReactNode.
Here is my Sidenav Code
import ReactDOM from 'react-dom';
import "#patternfly/react-core/dist/styles/base.css";
import '../../app/fonts.css';
import React from 'react';
import {
Nav,
NavExpandable,
NavItem,
NavList
} from '#patternfly/react-core';
function SideNav() {
this.state = {
activeGroup: 'grp-1',
activeItem: 'grp-1_itm-1'
};
this.onNavSelect = result => {
this.setState({
activeItem: result.itemId,
activeGroup: result.groupId
});
};
const { activeItem, activeGroup } = this.state;
const PageNav = (
<Nav onSelect={this.onNavSelect} aria-label="Nav" theme="dark">
<NavList>
<NavExpandable title="System Panel" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
<NavItem groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
Overview
</NavItem>
<NavItem groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
Resource usage
</NavItem>
<NavItem groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
Hypervisors
</NavItem>
</NavExpandable>
</NavList>
</Nav>
);
return (PageNav);
}
export default SideNav;
The above is my sideNav function component and using it in my layout component.
My Header component
import "#patternfly/react-core/dist/styles/base.css";
import '../../app/fonts.css';
import React from 'react';
import {
Page,
PageHeader,
PageSection,
PageSectionVariants,
PageSidebar,
TextContent,
Text,
} from '#patternfly/react-core';
import SideNav from '../sideNav/sideNav';
class Layout extends React.Component {
render() {
const Header = (
<PageHeader
toolbar={PageToolbar}
showNavToggle
/>
);
const Sidebar = <PageSidebar nav={SideNav} theme="dark" />;
return (
<React.Fragment>
<Page
header={Header}
sidebar={Sidebar}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main title</Text>
<Text component="p">
Body
</Text>
</TextContent>
</PageSection>
</Page>
</React.Fragment>
);
}
}
export default Layout;
The issue is when passing my function component to Patternfly's PageSidebar component in nav attribute as
const Sidebar = <PageSidebar nav={SideNav} theme="dark" />; .
What exactly is wrong with this?
Looking at the code in the seed app, the nav property of <PageSidebar> is set to some React elements (some JSX), and not to a React component (a function returning some JSX).
I guess that instead of using nav={Sidenav}, you should use nav={<Sidenav />}, to make your code match the example.

Categories