We Keep Coding

Passing function as props in Reactjs

I am trying to pass function as prop. I did this before but now with the same logic it is giving me error (this.props.functionName is not a function).
I have a child (Navbar) and a parent component(MainComponent). I want to send a input value from Navbar to MainComponet and set it to the state value in parent Component.
Parent Component
import React ,{Component}from 'react'
import Navbar from '../Presentational/Navbar'
class Main extends Component{
constructor(props){
super(props)
this.state = {
searchItem: ''
}
}
GetSearchItem(search){
this.setState({searchItem:search})
}
render(){
return(
<div className = 'container'>
<div className = 'row'>
<div className = 'col-12 mt-1'>
<Navbar onChange = {(search)=>this.GetSearchItem(search)}></Navbar>
</div>
</div>
<div className = 'row'>
<div className = 'col-3'>
<h3>{this.state.searchItem}</h3>
</div>
</div>
</div>
)
}
}
export default Main
Child Component (Navbar)
import React,{Component} from 'react'
import {AppBar,Toolbar,IconButton,Typography,InputBase} from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import {fade , makeStyles} from '#material-ui/core/styles'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
}));
class Navbar extends Component{
render(){
const classes = this.props.classes;;
return(
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Pizaa Valley
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
onChange={(event)=>this.props.onChange(event.target.value)}
/>
</div>
</Toolbar>
</AppBar>
</div>
)
}
}
export default () => {
const classes = useStyles();
return (
<Navbar classes={classes} />
)
}

The problem is that you have two Navbar types. You first have the class component created using class Navbar. And second you have the following functional component defined here:
export default () => {
const classes = useStyles();
return (
<Navbar classes={classes} />
)
}
When you do
import Navbar from '../Presentational/Navbar'
<Navbar onChange = {(search)=>this.GetSearchItem(search)}></Navbar>
The onChange prop is correctly given to the functional component, but is never passed along to the class-based component. You can fix this by replacing your functional component with the below code:
export default props => {
const classes = useStyles();
return (
// using the "spread operator", we pass along all the props given
// to the functional component, so the class-based component can
// also access these
<Navbar {...props} classes={classes} />
)
}

you've done everything correctly except change this:
GetSearchItem(search){
this.setState({searchItem:search})
}
to
GetSearchItem = (search) => {
this.setState({searchItem:search})
}
as an arrow function it has access to the scope above

Try with the following:-
In your parent component modified the below line:-
<Navbar onChangeCallBack = {(search)=>this.GetSearchItem(search)}></Navbar>
In your child Navbar component only modified the below line:-
onChange={(event)=>this.props.onChangeCallBack(event.target.value)}

Pulling data and displaying it in react

I am working in react and try to build a page for this web app that displays data.
I haven't even been able to get it to display the data for this page yet.
The code that I need to pull is from a web link, I need to pull that and display it on a card with material UI.
import React, { Component } from 'react';
import Card from '#material-ui/core/Card';
import CardContent from '#material-ui/core/CardContent';
import Paper from '#material-ui/core/Paper';
import Typography from '#material-ui/core/Typography';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
const STYLES = {
card: {
minWidth: 275,
},
//bullet: {
//display: 'inline-block',
//margin: '0 2px',
//transform: 'scale(0.8)',
//},
//title: {
//marginBottom: 16,
//fontSize: 14,
//},
//pos: {
// marginBottom: 12,
//},
};
class ErrorView extends Component{
constructor(props) {
super(props);
this.extractErrorData = this.extractErrorData.bind(this)
}
extractErrorData(errorDatas) {
return errorDatas.map((errorViewData) => {
<Card>
<CardContent>
{'errorData.project'}
</CardContent>
<CardContent>
{'errorData.errorText'}
</CardContent>
</Card>
})
}
render() {
const { header, errorViewData } = this.props;
return (
<Paper elevation={4} Color='#fff'>
<Typography variant="headline" component="h3">
{header}
</Typography>
{this.extractErrorData(errorViewData)}
</Paper>
);
}
}
ErrorView = {
classes: PropTypes.object.isRequired,
};
export default withStyles(STYLES)(ErrorView);

Remove the single quotes in extractErrorData if you want to show errorData.project and errorData.errorText values (and rename errorData with errorViewData):
extractErrorData(errorDatas) {
return errorDatas.map((errorViewData) => {
<Card>
<CardContent>
{errorViewData.project}
</CardContent>
<CardContent>
{errorViewData.errorText}
</CardContent>
</Card>
})
}
Note: you should add a JSFiddle or write something more to let us better understand what the problem is.

Changing the url in React/Redux

I'm trying to build an app with React and Redux (DVA). It's using Ant.Design as the main framework. I'm trying to change the URL when the user clicks on a button, and obviously 'bind' that url change to an action, so that if the user goes directly to that URL, he gets what he wants.
At the moment here's what I have, in a function in my component.
const { dispatch, match } = this.props;
dispatch(routerRedux.push('/f/' + record.id));
This is the only thing that I was able to produce. It correctly changes the url, but doesn't bind the url with a specific behaviour, making it completely useless.
How do I link the URL with an action?

If you wish to trigger an action based on a URL, you'll need to use react-router to route a component that then performs the desired action. In such a case it is also a good idea to then visit a different URL, erasing the action-URL from the browser's history.
A typical router definition might look something like this (taken from react-router-redux's docs):
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/success" component={Success}/>
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
)
So you wish to add a path /f/<record-id>. You can do this by adding a line like this:
<Route path="/f/:recordId" component={MyActionComponent}/>
Now you need to define a component, MyActionComponent, that will perform your action.
import { connect } from 'react-redux';
import { replace } from 'react-router-redux';
const mapDispatchToProps = (dispatch: Dispatch) => ({
visitNextLocation: () => dispatch(replace('/success')),
myAction: (recordId) => dispatch(myAction(recordId)),
});
const withDispatch = connect(null, mapDispatchToProps);
class MyActionComponent extends Component {
props: {
match: {
params: {
recordId: string,
}
},
redirectToLogin: () => void,
myAction: string => void,
};
componentWillMount() {
const recordId = this.props.match.params.recordId;
if (recordId) {
this.props.myAction(token);
this.props.visitNextLocation();
}
}
render() {
return null;
}
}
Note the use of replace instead of push. This means, when a user visits this URL their action will get performed and they'll end up on /success. But if they click the Back button, they won't then revisit this URL and run the action again.

I can't put the code on Codepen for privacy reasons. But here's an extract:
router.js
...
},
'/users': {
component: dynamicWrapper(app, ['rule'], () => import('../routes/users')),
},
'/f/:userID': {
component: dynamicWrapper(app, ['rule'], () => import('../routes/users')),
},
...
users.js (the main component that contains LeftPanel and RightPanel)
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, List, Divider, Badge, Select, Radio, Input, Popover, Button, Table, Spin } from 'antd';
import RightPanel from './RightPanel';
import LeftPanel from './LeftPanel';
import { routerRedux, Route, Switch } from 'dva/router';
import 'font-awesome/css/font-awesome.min.css';
import FadeIn from 'react-fade-in';
#connect(({ rule, loading }) => ({rule, loading: loading.models.rule }))
export default class Users extends React.Component {
constructor(props) {
super(props)
this.state = {
selected_user: [],
defaultView: true,
isLoadingNow: false,
selectedRowKeys: [],
makeEmpty: false,
searchRes: []
}
}
selectRow = (record) => {
const { dispatch, match } = this.props;
dispatch(routerRedux.replace({ pathname: '/f/' + record.id }));
this.setState({isLoadingNow: true, selectedRowKeys: record.key})
setTimeout(() => {
this.setState({
isLoadingNow: false,
defaultView: false,
selected_user: record
})
}, 75)
}
componentDidMount() {
const { dispatch, match } = this.props;
dispatch({
type: 'rule/fetch'
});
if (match.params.userID == undefined) {
// do nothing
} else if (match.params.userID) {
var result = this.props.rule.data.list.filter(function( obj ) {
return obj.id == match.params.userID;
});
this.selectRow.bind(this, result[0])
}
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
type:"radio"
};
const { rule: { data }, loading } = this.props;
return (<div>
<LeftPanel
rowSelection={rowSelection}
dataSource={this.state.makeEmpty ? this.state.searchRes : this.props.rule.data.list}
selectRow={this.selectRow}
loadingStatus={loading}
/>
<RightPanel
selected_user={this.state.selected_user}
is_default={this.state.defaultView}
loading={this.state.isLoadingNow}
/>
</div>);
}
}
leftPanel.js (responsible for displaying the list of links, on which the user will click on one, which will do 2 things:
- change the url accordingly
- display specific data on RightPanel.js)
import React from 'react';
import { Table, Card } from 'antd';
import styles from './index.less';
// import 'font-awesome/css/font-awesome.min.css';
import { Row, Col, List, Divider, Badge, Select, Radio, Input, Popover, Button } from 'antd';
var moment = require('moment');
class LeftPanel extends React.Component {
constructor(props) {
super(props)
this.state = {
selected_row_index: undefined
}
}
handleChangeStyleOnSelectRow(index) {
this.setState({
selected_row_index: index
}, console.log(this.state.selected_row_index))
}
prettifyForTable(raw_data) {
var prettyRows = [];
raw_data.map((item,index) =>
prettyRows.push(
<div style={{"width": "100%"}}>
<Row style={{ "align-items": "center"}} type="flex" justify="space-between">
<Col span={10}>
<div style={{"font-size": "15px", "text-align": "center"}}>
{item.user_name} <i style={{"color": "rgba(0, 0, 0, 0.25)", "margin": "0 10px", "transform": "rotate(45deg)"}} className="fa fa-plane"> </i> {item.user_age}
<div style={{"font-size": "12px", "color": "grey"}}> {moment(item.user_color).format('HH:MM')} · {moment(item.user_order).format('HH:MM')} </div>
</div>
</Col>
<Col span={3}>
<div style={{"text-align": "right", "text-align": "center"}}>
{item.user_family}
</div>
</Col>
<Col span={6}>
<div style={{"text-align": "right", "text-align": "center"}}>
{moment(item.user_height).format('MMMM D')}
</div>
</Col>
<Col span={3}>
<div style={{"text-align": "center"}}>
{(item.status == "in_progress") ? <div> <Badge style={{"padding-right": "25px"}} status="processing"/></div> : <div style={{"text-align": "center"}}> <Badge style={{"padding-right": "25px"}} status="default"/></div>}
</div>
</Col>
</Row>
</div>
)
);
return prettyRows;
}
render() {
const stylesSelectedRow = { "background": "rgba(155,155,155,0.05)", "box-shadow": "0 0 5px 0 #4A90E2", "transform": "scale(1.01)"};
const { dataSource } = this.props;
return(
<div>
{dataSource &&
<Card bordered={false} loading={this.props.loadingStatus} className={styles.userRows} bodyStyle={{"padding": "0 15px"}}>
<List
size="small"
bordered={false}
dataSource={this.prettifyForTable(dataSource)}
renderItem={(item, index) => (<List.Item onClick={() => {this.state.selected_row_index == index ? null : this.props.selectRow(this.props.dataSource[index]); this.handleChangeStyleOnSelectRow(index)}} style={this.state.selected_row_index == index ? stylesSelectedRow : null} className={styles.userRows}>{item}</List.Item>)}
/>
</Card>
}
</div>
)
}
}
export default LeftPanel;
and finally RightPanel.js, that is reponsible for listening to the URL or a click on LeftPanel, and display data accordingly.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import infopng from '../../../assets/info.svg';
import TabInformations from './TabInformations.js';
import TabFamily from './TabFamily.js';
import TabProblems from './TabProblems.js';
import { Tabs, Button, Spin, Icon, Table, Pagination, Card, Col, Row, Spinner, Badge } from 'antd';
const TabPane = Tabs.TabPane;
import 'font-awesome/css/font-awesome.min.css';
import WindowSizeListener from 'react-window-size-listener'
import FadeIn from 'react-fade-in';
export default class RightPanel extends Component {
render() {
if (this.props.loading) {
return(
<div>
<Spin
indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />}
src="http://web.gndu.ac.in/DepartmentProfile/images/spinner.gif"
/>
</div>
);
} else if (this.props.is_default) {
return(
<div style={{"margin-top": "64px", "margin-right": "10px", "text-align": "center", "height": "90vh", "display": "flex", "align-items": "center", "justify-content": "center"}}>
<div>
<img src={infopng} style={{"height": "155px"}} />
<p style={{"color": "#8e8e8e"}}> select a user on the <br/> left-hand side... </p>
</div>
</div>
);
} else {
return (
<FadeIn>
<Card bodyStyle={{"padding": "0"}} style={{"background-color": "white", "height":"90vh", "padding": "20px", "box-shadow": "rgba(0, 21, 41, 0.1) 0px 0px 6px", "opacity": "1", "transition": "background 0.6s", "border-radius": "2px", "margin": "10px 10px 0 0px", "margin-top": "64px"}}>
<Tabs defaultActiveKey="1" style={{"text-align": "center", "padding": "0 15px"}}>
<TabPane tab="General" key="1">
<TabInformations
selected_user={this.props.selected_user}
/>
</TabPane>
<TabPane tab="Servicing" key="2">
<TabFamily
selected_user={this.props.selected_user}
/>
</TabPane>
<TabPane tab={<div>Defect(s)<Badge showZero count={0} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset', "margin-left": "10px" }} /></div>} key="3">
<TabProblems />
</TabPane>
</Tabs>
</Card>
</FadeIn>
);
}
}
}
This code does the initial job pretty well: when the user clicks on a link on leftPanel.js, leftPanel.js calls the method selectRow in users.js, which in turn selects a row and display it on RightPanel.js.
My question: how to add to this the fact that it changes the URL whenever the user clicks? And obviously, if the user clicks on "go back" in Chrome, the data in RightPanel.js has to change accordingly.. ?

React Native Layout Animation Not Animating? Or Doing It Wrong?

I've followed a couple of good tutorials in using Layout Animation with react native. I cannot seem to get something so basic to animate. I am attempting to animate the Tab, when it has been clicked on, the flex size increase but in the mobile device, although the size does increase, it is static and no animation is applied. I'm testing this on an Android device.
Nav.js
import React from 'react';
import { View, LayoutAnimation } from 'react-native';
export class Nav extends React.Component {
constructor(props) {
super(props);
this.state = {
active: 0
}
}
onTabPress(index) {
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({ active: index });
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}
render() {
return (
<View style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0, backgroundColor: this.props.color, flex: 1, flexDirection: 'row' }}>
{
React.Children.map(this.props.children, (child, index) => (
React.cloneElement(child, {
index: index,
active: this.state.active === index,
onTabPress: this.onTabPress.bind(this),
})
))
}
</View>
);
}
}
Tab.js (this.props.children as shown above are a list of Tabs)
import React from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet, Animated, Easing, Platform, LayoutAnimation } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
export class Tab extends React.Component {
constructor(props) {
super(props);
}
componentWillUpdate() {
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}
handlePress() {
if (this.props.active) return;
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.props.onTabPress(this.props.index);
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}
render() {
var active = this.props.active ? { flex: 1.75, top: 6 } : { flex: 1, top: 15 };
return (
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View style={[active, { alignItems: "center" }]}>
<Icon size={this.props.iconSize || 24} color={this.props.color || "white"} name={this.props.iconName} />
<Text style={{ color: this.props.color || "white" }}>{this.props.active && this.props.title}</Text>
</View>
</TouchableWithoutFeedback >
);
}
}
I've commented out the LayoutAnimation code blocks to clarify the areas where I have tried. I know i may be doing it wrong but I have followed these guides and it didn't work, so this code here was my attempt at trying to make it work my own way i guess. Thanks in advance.
https://blog.callstack.io/react-native-animations-revisited-part-i-783143d4884
https://medium.com/#Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e

Well, seems that there was nothing wrong with my code. I went on http://snack.expo.io
to test this on ios and the animation worked. When moved to android, it was acting up exactly the way it was for my android device. A quick google search after that lead me to this.
https://github.com/facebook/react-native/issues/5267.
Basically, you just write the following in the constructor of your code and it will work. You can perform further checks on it too to define that this code would only run on android by using Platform.OS and an if statement
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
}

React Native tasks not rendered until a refresh is done

I have a React Native component that is intended to render tasks in tinder-like card stack. It gets the tasks async from a Firebase backend and renders it into a card deck called Swiper. It also has three buttons, previous next and refresh, all of which get another task and renders the card. It seems to work but only after refresh/next/previous is called, until then the card stack is empty.
However, the console.log() in ComponentDidMount() has the same task data as getMore() does. Also on initial render there is a little pagination that shows there is one task loaded, just not the actual card.
Why doesn't the card show on initial load?
import React, { PureComponent, Component } from 'react';
import FitImage from 'react-native-fit-image';
import {View, H6, Text, StyleSheet,TouchableOpacity, Image} from "react-native";
import {inject, observer} from "mobx-react/native";
import moment from "moment";
import {Task as ITask} from "../Model";
import {Avatar, Styles,Task, Firebase, Circle, BaseContainer} from "../components";
import {H3,Content, Card, CardItem, Thumbnail, Button, Icon, Left, Body, Right, Tab, Tabs, TabHeading, H1, H2} from "native-base";
import variables from "../../native-base-theme/variables/commonColor";
import Swiper from 'react-native-swiper-animated';
export default class Lists extends Component {
render(): React$Element<*> {
return <BaseContainer title="Feed" navigation={this.props.navigation}>
<Feed />
</BaseContainer>;
}
}
export class Feed extends PureComponent {
swiper = null;
prev = () => {
this.swiper.forceLeftSwipe();
this.getMore();
}
next = () => {
this.swiper.forceRightSwipe();
this.getMore();
}
constructor(props) {
super(props);
this.state = { taskList: undefined } ;
}
getMore() {
Firebase.taskRef.limitToLast(1).on("value",snapshot => {
let tasks= _.map(snapshot.val(), task => task)
.filter(task => {
;
return !task.done;
});
if (tasks.length > 0) {
tasks = tasks.map((task, key) => (
<Task {...{task, key}} />
));
}
else tasks= [];
this.setState({ taskList: tasks });
console.log(this.state.taskList);
});
}
componentDidMount() {
Firebase.taskRef.limitToLast(1).on("value",snapshot => {
let tasks= _.map(snapshot.val(), task => task);
if (tasks.length > 0) {
tasks = tasks.map((task, key) => (
<Task {...{task, key}} />
);
}
else tasks= [];
this.setState({ taskList: tasks })
console.log(this.state.taskList);
});
}
render() {
return (
<View style={{ flex: 1 }}>
<Swiper
ref={(swiper) => {
this.swiper = swiper;
}}
showPagination={true}
paginationStyle={{ container: { backgroundColor: 'transparent' } }}
paginationLeft={''}
paginationRight={''}
swiper={false}
>
{ this.state.taskList }
</Swiper>
<View style={styles.buttonContainer}>
<Button danger style={{alignSelf: 'center', height: 65, borderRadius: 100,width:65, marginRight: 20}} onPress={this.prev} >
<Icon style={{fontSize: 30}} active name='thumbs-down' />
</Button>
<Button style={{backgroundColor: '#d8d8d8', alignSelf:'center', borderRadius: 100, width: 80, alignItems:'center', justifyContent:'center', height: 80}} onPress={this.next} >
<Icon style={{fontSize: 50}} active name='md-sync' />
</Button>
<Button success style={{alignSelf: 'center', height: 65, borderRadius: 100,width:65, marginLeft: 20}} onPress={this.next} >
<Icon style={{fontSize: 30}} active name='thumbs-up' />
</Button>
</View>
</View>
);
}
}