CODEWITHSUNDEEP
react-native
Carl Bruiners
Carl Bruiners

Reputation: 546

Using properties pass into a component

I have a component that is used to draw out player profiles, and I need to pass in one of two variables; men or ladies.

This is done simply by importing the component and calling;

<PlayerProfiles typeOfProfile='Men'/>

The component it is calling, is setup as so;

const PlayerProfiles = (typeOfProfile) => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);

function playertype(val) {
    return 'https://s2.eu-west-1.amazonaws.com/xxxx.json';;
}

useEffect(() => {
fetch(playertype(typeOfProfile))
  .then((response) => response.json())
  .then((json) => {
    setData(json)
    })
  .catch((error) => console.error(error))
  .finally(() => setLoading(false));
}, []);

return (
<View style={styles.body}>
  <View style={styles.topscroll}>
  {isLoading ? <ActivityIndicator/> : (
    <FlatList
      data={data.filter(data => data.Sex == 'Men')}

The challenge I'm having is that when want to use the typeOfProfile value instead of the hardcoded 'Men' in data={data.filter(data => data.Sex == typeOfProfile)} it's not reading the value as a string.

I have tried using JSON.stringify(typeOfProfile) but that returns the name of the property (typeOfProfile) as well. Before I strip back all the non-value parts, my question is what is the simplest way to get the value passed to typeOfProfile?

Upvotes: 1

Views: 25

Answers (1)

strdr4605
strdr4605

Reputation: 4362

The typeOfProfile prop is not used correctly.

const PlayerProfiles = (props) => {
  const typeOfProfile = props.typeOfProfile;
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

or you can restructure the props 

const PlayerProfiles = ({ typeOfProfile }) => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

See Components and Props.

Upvotes: 1

Related Questions