passing params react code example

Example 1: react native passing parameters to routes

Copy
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

Example 2: pass params react js

//pass color from parent -> child

App.js -> ColorPicker (Components/ColorPicker.js)

/// parent App.js
import ColorPicker from './Component/ColorPicker';

class App extends Component {
  
   constructor(props) {
        super(props);
        this.state = {
            color:  'red',
        };
    }
  
   render() {
        return (
			<div className="col">
    			<ColorPicker color={ this.state.color } />     
			</div>
		)
    }
}export default App;        

/// child ColorPicker
import React, { PureComponent } from 'react';

class ColorPicker extends PureComponent {  

    constructor(props) {
        super(props);
        this.state = {
            colors: ['red', 'green', 'blue', 'yellow', 'purple'],
        };
    }

    render() {

        var elementColors = this.state.colors.map((c, index) => {
            return <span key={ index } 
                         className={ this.props.color === c ? 'active squad ml-10' : 'squad ml-10'}
                        }  // click into color c will pass params c to Bai11Practice.js
                        >
                   </span>
        });
}
export default ColorPicker;    

// ---------------------------------------

//pass params from child -> parent
// onClick => setActiveColor -> this.props.onReceiverColor(c);
ColorPicker (Components/ColorPicker.js) -> App.js 

/// child ColorPicker
import React, { PureComponent } from 'react';

class ColorPicker extends PureComponent {  

    constructor(props) {
        super(props);
        this.state = {
            colors: ['red', 'green', 'blue', 'yellow', 'purple'],
        };
    }
  
    setActiveColor = (c)  => {
        this.props.onReceiverColor(c);
    }

    render() {

        var elementColors = this.state.colors.map((c, index) => {
            return <span key={ index } 
                        onClick={ () => this.setActiveColor(c) }  // click into color c will pass params c to Bai11Practice.js
                        >
                   </span>
        });
}
export default ColorPicker;        

// Parent
import React, { Component } from 'react';
import ColorPicker from './Component/ColorPicker';

class App extends Component {

    onSetColor(c) {
        alert(c);
    }

    render() {
        return (
		        <ColorPicker onReceiverColor={ this.onSetColor } />     
        );
    }
}export default App;