I'm working on a React Native menu with a StackNavigator. If the user press a ListItem an id should be passed to all other Tabs in this menu, so the data can get fetched from an API. I tried to use screenProps to pass the data. Unfortunately I wasn't able to reset the value, when pressing a ListItem.
export default class Index extends Component {
constructor(props){
super(props);
}
render() {
return (
<OrderScreen
screenProps={ { Number: 123 } }
/>
);
}
}
In the child components I can access the prop but not reassign it:
export default class ListThumbnailExample extends Component
{
constructor(props)
{
super(props);
const{screenProps} = this.props;
this.state = { epNummer: screenProps.Number };
}
render()
{
return (
<Content>
<List>
{
this.state.orders.map(data => (
<ListItem key = {data.Number}
onPress = {() =>
{
this.props.screenProps.Number = data.Number;
this.props.navigation.navigate('Orders')
}
}
<Text>{ data.name }</Text>
</ListItem >
))
}
</List>
</Content >
);
}
}
Thank you!
In React and React-native props are immutable by design :
https://reactjs.org/docs/components-and-props.html#props-are-read-only
In your case if you want to pass screen-specific data you may wanna try passing them in the params of the navigation.navigate() function like this :
this.props.navigation.navigate('Orders',data.Number)
you can then access them in "Orders" screen from : props.navigation.state.params
More information here : https://reactnavigation.org/docs/params.html
Related
I'm learning ReactJS and using this library https://github.com/salesforce/design-system-react.
I'm attempting to use a component I created SelectCell. It's being used two times. I'd like to pass it a prop selectedOption and in the first instance pass it a property originating from my state, a property selectedSectionId and the second time the component is used set selectedOption to be selectedQuestionId.
The issue is the library obfuscates some of the logic away and I'm not well versed enough in react to understand what to do. I set items on the DataTable component and I know the children components have access to item in props. I'm getting the error TypeError: Cannot read property 'selectedSectionId' of undefined My component is below:
import React from 'react';
import {Button,DataTable,DataTableColumn,DataTableCell,Dropdown,DataTableRowActions} from '#salesforce/design-system-react';
const ParameterDataTableCell = ({ children, ...props }) => (
<DataTableCell title={children} {...props}>
<input type='text' className='slds-input' value={props.item.parameterName} />
</DataTableCell>
);
ParameterDataTableCell.displayName = DataTableCell.displayName;
const SelectCell = ({ children,...props }) => (
<DataTableCell {...props}>
<div>
<Dropdown
align='left'
checkmark={false}
iconCategory='utility'
iconName='down'
iconPosition='right'
label={setPicklistLabel(props.allOptions,props.type,props.item,props.selectedOptionId)}
options={props.allOptions}
value={props.item.sectionName}>
</Dropdown>
</div>
</DataTableCell>
);
const setPicklistLabel = (allOptions,picklistType,item,selectedOptionId) => {
const foundOption = allOptions.find((thisOption) => selectedOptionId===thisOption.id);
return foundOption ? foundOption.label : 'Select an Option';
}
SelectCell.displayName = DataTableCell.displayName;
class ParameterTable extends React.Component {
static displayName = 'ParameterTable';
state = {
paramRows: [
{
parameterName: 'param1',
selectedSectionId: '001441094',
selectedQuestionId: '00ri23or231441094'
},
{
parameterName: 'param2',
selectedSectionId: '001441094',
selectedQuestionId: '00ri23or231441094'
}
],
};
addRow = () => {
const newRow = {'parameterName':'','selectedSectionId':'','selectedQuestionId':''};
const rows = this.state.paramRows;
rows.push(newRow);
this.setState({items:rows});
};
render() {
return (
<div>
<DataTable
items={this.state.paramRows}
className='slds-m-top_large'
>
<DataTableColumn
label='Parameter Name'
primaryColumn
property='parameterName'
>
<ParameterDataTableCell />
</DataTableColumn>
<DataTableColumn
label='Section Name'
property='sectionName'
>
<SelectCell
allOptions={this.props.serverData.allSections}
selectedOptionId={this.props.item.selectedSectionId}/>
</DataTableColumn>
<DataTableColumn
label='Question Name'
property='questionName'
>
<SelectCell
allOptions={this.props.serverData.allQuestions}
selectedOptionId={this.props.item.selectedQuestionId}/>
</DataTableColumn>
</DataTable>
<Button
iconCategory='utility'
iconName='add'
iconPosition='right'
label='Add Parameter'
onClick={this.addRow}
/>
</div>
);
}
}
export default ParameterTable;
Well, from first glance, it seems like you missed out using the constructor(props) and super(props) lines.
class ParameterTable extends React.Component {
static displayName = 'ParameterTable';
constructor(props) {
super(props);
this.state = {
paramRows: [
{
parameterName: 'param1',
selectedSectionId: '001441094',
selectedQuestionId: '00ri23or231441094'
},
{
parameterName: 'param2',
selectedSectionId: '001441094',
selectedQuestionId: '00ri23or231441094'
}
],
};
}
I a learning react and stuck at this place. I am creating an app In which user will see a list of product with different id and name. I have created another component in which the detail of the product will open . I am collection the id and value of the particular product in my addList component by onClick function. And now i want to send those value in DetailList component so that i can show the detail of that particular product.
A roadmap like
Add list -> (user click on a product) -> id and name of the product passes to the DetailList component -> Detail list component open by fetching the product detail.
Here is my code of Add list component
export default class Addlist extends Component {
constructor(props) {
super(props)
this.state = {
posts : []
}
}
passToDetailList(id) {
console.log( id)
}
async componentDidMount() {
axios.get('http://localhost:80/get_add_list.php')
.then(response => {
console.log(response);
this.setState({posts: response.data})
})
.catch(error => {
console.log(error);
})
}
render() {
const { posts } = this.state;
// JSON.parse(posts)
return (
<Fragment>
<div className="container" id="listOfAdd">
<ul className="addUl">
{
posts.map(post => {
return (
<li key={post.id}>
<div className="row">
<div className="col-md-4">
<img src={trialImage} alt=""></img>
</div> {/* min col end */}
<div className="col-md-8">
<b><h2>{post.add_title}</h2></b>
{/* This button is clicked by user to view detail of that particular product */}
<button onClick={() => this.passToDetailList(post.id)}>VIEW</button>
</div> {/* min col end */}
</div> {/* row end */}
</li>
);
})}
</ul>
</div>{/* container end */}
</Fragment>
)
}
}
You should pass the data through the routes -
<Route path="/details/:id" component={DetailList} /> // router config
passToDetailList(id) {
this.props.history.push('/details/'+id)
}
and then in the DetailList Component, you can access the value through -
console.log(this.props.match.params.id) - //here is the passed product Id
You need to elevate the state for id to a common parent between AddList and DetailList and then create a function in parent component to set the id and pass the id and setId function to your AddList Component through props , then just use setId function to set the id state in passToDetailList function.
finally you can use the id in your DetailList Component to fetch its details
so Here is how your AddList Component would look like:
export default class Addlist extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
passToDetailList(id) {
this.props.setId(id);
}
// The rest of your code
}
and here is how your DetailList Component will look like:
export default class DetailList extends Component {
componentDidMount(){
// Use the id to fetch its details
console.log(this.props.id)
}
}
and finally here is your CommonParent Component:
export default class CommonParent extends Component {
constructor(props) {
super(props);
this.state = {
id: ''
};
this.setId = this.setId.bind(this);
}
setId(id){
this.setState({
id
})
}
render(){
return(
<>
<AddList setId={this.setId} />
<DetailList id={this.state.id} />
</>
)
}
}
if your Components are very far from each other in component tree you can use react context or redux for handling id state
I'm having an issue getting my child component to update with new props. I'm deleting an item from the global state and it's successful. But when the item gets deleted, I'm expecting that item to no longer show. It's still being shown but if I were to move to another screen then back, it's gone. Any idea on what I might be missing here?
Thanks!!
export default class Summary extends Component {
constructor(props) {
super(props);
this.state = {
pickupData: this.props.pickup
};
}
handleDelete(item) {
this.props.deleteLocationItem(item);
}
render() {
const pickup = this.state.pickup;
return (
<View>
{pickup.map((item, i) => (
<LocationItem
name={item}
onPressDelete={() => this.handleDelete(item)}
/>
))}
</View>
);
}
}
const LocationItem = ({ onPressDelete, name }) => (
<TouchableOpacity onPress={onPressDelete}>
<Text>Hi, {name}, CLICK ME TO DELETE</Text>
</TouchableOpacity>
);
------- Additional Info ------
case 'DELETE_LOCATION_INFO':
return Object.assign({}, state, {
pickup: state.pickup.filter(item => item !== action.action)
})
export function deleteLocationInfo(x){
return {
type: DELETE_LOCATION_INFO,
action: x
}
}
Your deleteLocationItem must be something like this:
deleteLocationItem(id) {
this.setState({
items: this.state.items.filter(item => item.id !== id)
});
}
Then inside your Summary class you dont need to set the prop again. Just receive pickup from props like this:
render (
const { pickup } = this.props;
return(
<View>
{ pickup.map
...
Render is happening based on the state which is not updated other than in constructor. When the prop updates from parent, it is not reflected in the state.
Add componentWillReceiveProps method to receive new props and update state, which will cause new data to render
But more preferably, if the state is not being changed in any way after initialization, render directly using the prop itself which will resolve this issue
I'm new in react-native and have some probems. In the fahterScreen I add some items to array and pass to childs as prop, I need that the child (CanastaScreen) update every 1seg and show the new value. I have the next code:
export default class CanastaScreen extends React.Component {
constructor(props) {
super(props);
setInterval( () => { this.render(); }, 1000);
};
render() {
return (
<Container>
<Content>
{this.props.screenProps.canasta.map( (item) => {
console.log(item.nombre);
return (
<Text>{item.nombre}</Text>
);
})}
</Content>
</Container>
);
}
}
Console output show correctly:
Item1
Item2
Item3
etc.
But the screen is always in blank. Some can help my about it ?
Thanks
First of all, you never should call render method of a component. in React Native, a component should update only if it's state changes. so if you have something like this :
<Parent>
<Canasta> ... </Canasta>
</Parent>
assuming that the changing variable is called foo in state of Parent, you need to pass it as prop to Canasta (child) and now by changing state of Parent (changing foo), Canasta should get updated. here's an example (calling updateFoo will update both Parent and Canasta):
class Parent extends Component {
constructor(props){
super(props); // it's recommended to include this in all constructors
this.state = { foo: initalValue } // give some value to foo
}
updateFoo(newValue){
this.setState({foo: newValue}) // setting state on a component will update it (as i said)
}
render() {
return(
<Canasta someProp={this.state.foo}> ... </Canasta>
)
}
}
}
After various changes, is found, the complete structure is: Parent(App.js) call children(Menu, Canasta). Menu allow add items to the shop-car and Canasta allow to sort and delete items. These are the important parts of the code:
App.js
export default class App extends React.Component {
constructor(props) {
super(props);
this.stateUpdater = this.stateUpdater.bind(this);
this.state = { canasta:[] };
}
render() {
return (
<View>
<RootNavigation data={[this.state, this.stateUpdater]} />
</View>
);
}
}
Menu.js
tryAddCanasta(index, plato){
let canasta = this.props.screenProps[0].canasta;
plato.id_Plato = canasta.length;
canasta.push(plato);
this.props.screenProps[1]('canasta', canasta);
}
Canasta.js
shouldComponentUpdate(nextProps, nextState) {
return true;
}
render() {
return (
<Container>
<Content>
<List>
{this.props.screenProps[0].canasta.map( (item) => {
return ( this._renderRow(item) );
})}
</List>
</Content>
</Container>
);
}
Special thanks to #Shadow_m2, now I don't need check every time, it works in "real time"
I am trying to filter my array object list and then trying to display in the ListView with new DataSource. However, the list is not getting filtered. I know that my filter function works correctly. ( I checked it in the console.log )
I am using Redux to map my state to prop. And then trying to filter the prop. Is this the wrong way?
Here is my code:
/*global fetch:false*/
import _ from 'lodash';
import React, { Component } from 'react';
import { ListView, Text as NText } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import {
Container, Header, Item,
Icon, Input, ListItem, Text,
Left, Right, Body, Button
} from 'native-base';
import Spinner from '../common/Spinner';
import HealthImage from '../misc/HealthImage';
import { assetsFetch } from '../../actions';
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
class AssetsList extends Component {
componentWillMount() {
this.props.assetsFetch();
// Implementing the datasource for the list View
this.createDataSource(this.props.assets);
}
componentWillReceiveProps(nextProps) {
// Next props is the next set of props that this component will be rendered with.
// this.props is still equal to the old set of props.
this.createDataSource(nextProps.assets);
}
onSearchChange(text) {
const filteredAssets = this.props.assets.filter(
(asset) => {
return asset.name.indexOf(text) !== -1;
}
);
this.dataSource = ds.cloneWithRows(_.values(filteredAssets));
}
createDataSource(assets) {
this.dataSource = ds.cloneWithRows(assets);
}
renderRow(asset) {
return (
<ListItem thumbnail>
<Left>
<HealthImage health={asset.health} />
</Left>
<Body>
<Text>{asset.name}</Text>
<NText style={styles.nText}>
Location: {asset.location} |
Serial: {asset.serial_number}
</NText>
<NText>
Total Samples: {asset.total_samples}
</NText>
</Body>
<Right>
<Button transparent onPress={() => Actions.assetShow()}>
<Text>View</Text>
</Button>
</Right>
</ListItem>
);
}
render() {
return (
<Input
placeholder="Search"
onChangeText={this.onSearchChange.bind(this)}
/>
<ListView
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
);
}
}
const mapStateToProps = state => {
return {
assets: _.values(state.assets.asset),
spinner: state.assets.asset_spinner
};
};
export default connect(mapStateToProps, { assetsFetch })(AssetsList);
What am I doing wrong here?
It's a little hard to follow what's going on here. I would simplify it to be like so:
class AssetsList extends Component {
state = {};
componentDidMount() {
return this.props.assetsFetch();
}
onSearchChange(text) {
this.setState({
searchTerm: text
});
}
renderRow(asset) {
return (
<ListItem thumbnail>
<Left>
<HealthImage health={asset.health} />
</Left>
<Body>
<Text>{asset.name}</Text>
<NText style={styles.nText}>
Location: {asset.location} |
Serial: {asset.serial_number}
</NText>
<NText>
Total Samples: {asset.total_samples}
</NText>
</Body>
<Right>
<Button transparent onPress={() => Actions.assetShow()}>
<Text>View</Text>
</Button>
</Right>
</ListItem>
);
}
getFilteredAssets() {
}
render() {
const filteredAssets = this.state.searchTerm
? this.props.assets.filter(asset => {
return asset.name.indexOf(this.state.searchTerm) > -1;
})
: this.props.assets;
const dataSource = ds.cloneWithRows(filteredAssets);
return (
<Input
placeholder="Search"
onChangeText={this.onSearchChange.bind(this)}
/>
<ListView
enableEmptySections
dataSource={dataSource}
renderRow={this.renderRow}
/>
);
}
}
const mapStateToProps = state => {
return {
assets: _.values(state.assets.asset),
spinner: state.assets.asset_spinner
};
};
export default connect(mapStateToProps, { assetsFetch })(AssetsList);
A few points:
Your component is stateful. There is one piece of state that belongs only to the component: the search term. Keep that in component state.
Don't change the data source in life cycle functions. Do it the latest point you know it's needed: in render.
I'm guessing that there's something async in assetFetch, so you probably should return it in componentDidMount.
I changed from componentWillMount to componentDidMount. It's recommended to put async fetching componentDidMount. This can matter if you ever do server side rendering.
Skip filtering if there is no search term. This would only matter if the list is very large.
One thing I have a little concern with is the pattern of fetching inside a component, putting it in global state, and then relying on that component to react to the global state change. Thus changing global state becomes a side effect of simply viewing something. I assume you are doing it because assets is used elsewhere, and this is a convenient point to freshen them from the server so that they will show up in other components that do not fetch them. This pattern can result in hard-to-find bugs.
You need to do setState to trigger render. Here's how I would do it -
constructor(props) {
super(props);
this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 });
this.state = {
assets: []
};
}
componentWillMount() {
this.props.assetsFetch();
this.setState({
assets: this.props.assets
});
}
componentWillReceiveProps(nextProps) {
this.setState({
assets: nextProps.assets
});
}
onSearchChange(text) {
const filteredAssets = this.props.assets.filter(asset => asset.name.indexOf(text) !== -1);
this.setState({
assets: _.values(filteredAssets)
});
}
render() {
...
<ListView
dataSource={this.ds.cloneWithRows(this.state.assets)}
.....
/>
}