My code is here
I am getting the error below.
I believe its something to do with the employee create line in the code below and i cannot figure out why this might be happening. I am doing this from a tutorial
import React, { Component } from 'react';
//import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Picker, Text } from 'react-native';
import { employeeUpdate, employeeCreate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
onButtonPress() {
const { name, phone, shift } = this.props;
this.props.employeeCreate({ name, phone, shift: shift || 'Monday' });
}
render() {
return (
//
// <View>
// <Text>Employees</Text>
// </View>
<Card>
<CardSection>
<Input
label="Name"
placeholder="Jane"
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label="Phone"
placeholder="555-555-5555"
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerLabelStyle}>Pick a Shift: </Text>
<Picker
//style={{ flex: 1 }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button onPress={this.onButtonPress.bind(this)}>
Create
</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerLabelStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, {
employeeUpdate, employeeCreate
})(EmployeeCreate);
Here is the error:
Folks- this is resolved. I found my answer.
In the
https://github.com/samrao2/manager-4/blob/master/src/actions/index.js
file. I was not exporting all the actions from the Employeeactions file and so was not exporting the employeeCreate action. i should have put a * there.
Issue is resolved! Thanks!
Related
I'm learning React Native and I'm stuck on a Picker problem. On clicking it shows up but I can't select anything else other than "Monday". Whenever I do, I get an error
I've tried searching for the problem on the internet and worked with my action creators but nothing seems to work
import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
render() {
return (
<Card>
<CardSection>
<Input
label='Name'
placeholder='Jane'
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label='Phone'
placeholder='555-555-5555'
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerTextStyle}>Shift</Text>
<Picker
style={{ alignItems: "center" }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>Create</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, { employeeUpdate })(EmployeeCreate);
Here is my EmployeeActions File:
import EMPLOYEE_UPDATE from './types'
export const employeeUpdate = ({ prop, value }) => {
return {
type: EMPLOYEE_UPDATE,
payload: { prop, value }
};
};
Here is the EmployeeFormReducer:
import EMPLOYEE_UPDATE from '../actions/types';
const INITIAL_STATE = { name: '', phone: '', shift: '' };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMPLOYEE_UPDATE:
//action.payload === { prop: 'name', value: 'jane' }
return { ...state, [action.payload.prop]: action.payload.value };
default:
return state;
}
}
I expect to select any day as per my choice
Solved. Did some changes in types.js file:
export const EMAIL_CHANGED = 'email_changed';
export const PASSWORD_CHANGED = 'password_changed';
export const LOGIN_USER_SUCCESS = 'login_user_success';
export const LOGIN_USER_FAIL = 'login_user_fail';
export const LOGIN_USER = 'login_user';
export const EMPLOYEE_UPDATE = 'employee_update';
export default {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER,
EMPLOYEE_UPDATE
}
I'm new to React Native and learning from a course. Unfortunately, I'm stuck in a problem where my picker doesn't show up. Even after styling my CardSection, it is not working. Here is a the code. Please help
I've tried styling the CardSection but it doesn't seem to be working
import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
render() {
return (
<Card>
<CardSection>
<Input
label='Name'
placeholder='Jane'
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label='Phone'
placeholder='555-555-5555'
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerTextStyle}>Shift</Text>
<Picker
style={{ flex: 1 }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>Create</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, { employeeUpdate })(EmployeeCreate);
Here is the CardSection
import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => {
return (
<View style={[styles.constainerStyle, props.style]}>
{props.children}
</View>
);
};
const styles = {
constainerStyle: {
bottomBorderWidth: 1,
padding: 5,
backgroundColor: '#FFF',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#DDD',
position: 'relative'
}
};
export { CardSection };
I expect the CardSection to show up like a Picker
Found the solution. Adding the following styling to the picker resolves it
style={{ alignItems: "center" }}
I was trying to solve the problem by removing the item from but it seems didn't work. i wonder, am i forgot to pass something into the command?
hopefully, the screen and my code will make my explanation more briefly
Here is my code
EmployeeCreate.js
import React,{Component} from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import {Card,CardSection,Input,Button} from './common';
class EmployeeCreate extends Component {
render () {
return (
<Card>
<CardSection>
<Input
label="Name"
placeholder="jane"
/>
</CardSection>
<CardSection>
<Input
label="Phone"
placeholder="08122030930"
/>
</CardSection>
<CardSection style={{flexDirection:'column'}}>
<Text style={styles.pickerTextStyle}>Select your shift</Text>
<Picker
selectedValue={this.props.shift}
onValueChange={day => this.props.employeeUpdate ({prop:'shift' , value: day})}
>
<Picker.item label="Monday" value="Monday" />
<Picker.item label="Tuesday" value="Tuesday" />
<Picker.item label="Wednesday" value="Wednesday" />
<Picker.item label="Thursday" value="Thursday" />
<Picker.item label="Friday" value="Friday" />
<Picker.item label="Saturday" value="Saturday" />
<Picker.item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>
create
</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps =(state) => {
const { name,phone,shift } = state.employeeForm ;
return {name,phone,shift};
};
export default connect (mapStateToProps,{employeeUpdate}) (EmployeeCreate)
;
here attached also the picture of it
enter image description here
If the function that you mean to call is employeeUpdate that you have imported from ./actions, then you should remove this.props.
Else, the function may need to be defined in the parent class of EmployeeCreate.
I'm using react-native's picker to pick an item from the list of items. What I want to ask is how can I make the selected item to look different may be with a different style or with an icon?
You can use library to get such functionality, Please take a look...
http://docs.nativebase.io/Components.html#picker-with-icon-style-headref
import React, { Component } from "react";
import { Container, Header, Content, Icon, Picker, Form } from "native-base";
class PickerWithIconStyle extends Component {
constructor(props) {
super(props);
this.state = {
selected: "key1"
};
}
onValueChange(value: string) {
this.setState({
selected: value
});
}
render() {
return (
<Container>
<Header />
<Content>
<Form>
<Picker
mode="dropdown"
iosHeader="Select your SIM"
iosIcon={<Icon name="arrow-dropdown-circle" style={{ color: "#007aff", fontSize: 25 }} />}
style={{ width: undefined }}
selectedValue={this.state.selected}
onValueChange={this.onValueChange.bind(this)}
>
<Picker.Item label="Wallet" value="key0" />
<Picker.Item label="ATM Card" value="key1" />
<Picker.Item label="Debit Card" value="key2" />
<Picker.Item label="Credit Card" value="key3" />
<Picker.Item label="Net Banking" value="key4" />
</Picker>
</Form>
</Content>
</Container>
);
}
}
I am trying to use Native-Base radio buttons. I've added some additional code to it for making radio buttons work. While it's still not working. Here is the code:
import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: 'itemOne',
}
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem>
<Text>Daily Stand Up</Text>
<Right>
<Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
selected={this.state.itemSelected == 'itemOne'}
/>
</Right>
</ListItem>
<ListItem>
<Text>Discussion with Client</Text>
<Right>
<Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
selected={this.state.itemSelected == 'itemTwo' }
/>
</Right>
</ListItem>
</Content>
</Container>
);
}
}
How can this code be fixed? What's wrong?
Handle the onPress event in the ListItem
import React, { Component } from "react";
import { Container, Header, Content, ListItem, Text, Radio, Right } from "native-base";
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: "itemOne",
};
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem onPress={() => this.setState({ itemSelected: "itemOne" })}>
<Text>Daily Stand Up</Text>
<Right>
<Radio selected={this.state.itemSelected == "itemOne"} />
</Right>
</ListItem>
<ListItem onPress={() => this.setState({ itemSelected: "itemTwo" })}>
<Text>Discussion with Client</Text>
<Right>
<Radio selected={this.state.itemSelected == "itemTwo"} />
</Right>
</ListItem>
</Content>
</Container>
);
}
}