React Native | Passing data between components - react-native

Question

I am a beginner with React Native. I would like to pass data between two components. I get the following error:
TypeError: undefined is not an object (evaluating 'params.title'
App.js
import React from 'react';
import TabBar from './components/TabBar';
export default function App() {
return (
<TabBar title="Hall Building"/>
);
}
TabBar.js
import React, { useState } from 'react';
import { Text } from 'react-native';
export default function TabBar({ params }){
const [tabContent] = useState([
{
title: params.title,
}
])
return(
<Text>
{ tabContent.title }
</Text>
);
}
export { TabBar };

Answer 1

There are a couple things you're doing wrong in your TabBar component.
In theTabBar you are destructuring the property params but your property is called title. You either have to remove the curly braces or rename it to title. If you rename params to title you can remove params. and simply leave title. If you chose to remove the curly braces you can leave it as it is.
Then you also try to access tabContent.title but tabContent is an array with objects. You either have to remove the square brackets and pass an object as argument to useState OR you can access the title by getting the first index like so tabContent[0].title.

Answer 2

Change your TabBar into this :
import React, { useState } from 'react';
import { Text } from 'react-native';
export default function TabBar({ title }){
const [tabContent] = useState(title)
return(
<Text>
{ tabContent }
</Text>
);
}
export { TabBar };
hope it helps.