React native Question posted in
The official React Native documentation can be found here.

Parent triggering function defined in Child, React Native

Good afternoon,

I have a react native project. I currently have 3 major UI components:

A timeline which consists of a user defined number of channels, which have a fluctuating number of events (Think gantt chart or audio editors). I want a button defined in the timeline to call a function defined in the child channel object, change some parameters as defined in the child function, and re-render.

UPDATED: I refactored the original code posted here to all be contained within a single class, but having similar issues. Refactored code:

class TIMELINE extends Component{
  constructor(props) {
    super(props);
    this.state = {
      allEvents: [],
      allChannels:[],
    };
  }
  render() {
    return(
      <View>
          <Text style={styles.welcomeMessage}>Timeline</Text>
          <View name=CONATINER_VIEW>
          {
            this.state.allChannels.map((channel)=>{
              console.log(channel); //<<<<This is Printing proper info
              renderChannel(this, channel) //<<<< Renders nothing
            })
          }
        </View>
      </View>
    );
  }

renderChannel = (timeline, channel) =>{
  return (
   <View style={[styles.container, styles.channelContainer, styles.channelWrapper]} name="ChannelWrapperViewThing">
      <View style={styles.verticleLine}></View>
      <Pressable  style={styles.eventLane} onPressIn={timeline.handlePressIn}  onPressOut={timeline.handlePressOut}>
      {//RenderEvents TBD}
      </Pressable>
    </View>
  )
}

This refactored code splits out the recursive display of channels and events into their own rendering functions. During the loop, I print out the stored channel datils to the console, and that print is working and printing the expected values, but nothing returned from renderChannel() is rendered, and if I inspect the wrapping view name=CONATINER_VIEW, has the correct number of children (depending on how many channels have been added) in the array, but they are all undefined. Also puzzling, if I write a temporary function renderEvents and just have it print to console, it will for each channel object and will print data passed to it properly, but still nothing renders.

Any suggestions?

Thank you!

Tags:

2

Answers


  1. 0

    The way I trigger a function in the child from the parent is using useEffect

    import React, {useEffect, useState} from 'react';
import {View, Text, Pressable} from 'react-native';

export default function MyComponent() {
  const [value, setValue] = useState(null);
  const [refresh, toggleRefresh] = useState(false);
  const pressThis = n => {
    console.log('Pressed!');
    setValue(n);
    toggleRefresh(!refresh);
  };

  return (
    <View>
      <Pressable onPress={() => pressThis(1)}>
        <Text>Tap Me 1</Text>
      </Pressable>
      <Pressable onPress={() => pressThis(2)}>
        <Text>Tap Me 2</Text>
      </Pressable>
      <Pressable onPress={() => pressThis(3)}>
        <Text>Tap Me 3</Text>
      </Pressable>
      <MyChild
        call1={value === 1}
        call2={value === 2}
        call3={value === 3}
        refresh={refresh}
      />
    </View>
  );
}

function MyChild({call1, call2, call3, refresh}) {
  function test1() {
    console.log('First');
  }
  function test2() {
    console.log('Second');
  }
  function test3() {
    console.log('Third');
  }

  useEffect(() => {
    call1 && test1();
    call2 && test2();
    call3 && test3();
  }, [call1, call2, call3, refresh]);
  return <View />;
}
    Login or Signup to reply.
  2. 0

    You need to return the value of renderChannel inside the map, otherwise everything would be undefined:

        this.state.allChannels.map((channel)=>{
        return renderChannel(this, channel)
    })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search