CODEWITHSUNDEEP
javascriptreactjsreact-native
schoenbl
schoenbl

Reputation: 723

Cannot get child hook to receive state

I want to be able to pass the current user from my Comment component to my CommentList component

class Comment extends Component {
    render() {
        return(
            <View>
                <Header
                    rounded
                    style={{
                        backgroundColor: '#ffffff',
                        position: 'relative',
                    }}
                >
                    <View style={{flexDirection: 'row', flexWrap: 'wrap', right: '43%', top: '50%'}}>
                        <Icon name='chevron-left' size={10} color='#006FFF' style={{top: '6%'}}/>
                        <NativeText
                            onPress={() => this.props.history.push('/')}
                            style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular'}}
                        >
                            Back
                        </NativeText>
                    </View>
                </Header>
                <View
                    style={{paddingLeft: '2%', paddingTop: '2%'}}
                >
                    <CommentList

                        options={this.props.location.state.comments}
                        currentUser={this.props.location.state.currentUser}
                    />
                </View>
            </View>
        )
    }
}

export default withRouter(Comment)

const CommentList = (options, currentUser) => {
    const [modalVisible, setModalVisible] = useState(false)
    const [parentId, changeParentId] = useState('')
    const [commentInput, changeComment] = useState('')

    return ( 
      <View>{console.log(currentUser)}
          {options.options.map(option => (
              <View>
                <NativeText
                    style={{fontSize: 12, fontFamily: 'Montserrat-Regular'}}
                >
                    {option.content}
                </NativeText>
                <Icon
                    name='reply'
                    size={12}
                    onPress={() => {
                        setModalVisible(true)
                        changeParentId(option._id)
                    }}
                />
                { 
                <View
                    style={{left: '10%'}}
                >
                    <CommentList
                        options={option.reply}
                    />
                </View>
                }
            </View>
          ))}
      </View>
    )
}

When I try to pass it through currentUser, it returns an empty object; options does show up in CommentList.

Upvotes: 1

Views: 52

Answers (2)

C Ankita
C Ankita

Reputation: 175

The props you pass to functional component are consolidated into an object. So you need to destructure the values.

Or, 

    const CommentList = (props) => {
       //props.options //props.currentUser
     }

Upvotes: 1

Jack Vial
Jack Vial

Reputation: 2474

You are missing the object destructuring syntax for CommentList. It should be as follows:

const CommentList = ({ options, currentUser }) => {
    // component content
}

Upvotes: 1

Related Questions