Как передать строку в качестве подпорки и заставить компонент читать ее как переменную?

Question

Запрос : у меня есть один компонент, который будет извлекать три разных данных из json. Но как мне передать реквизиты, чтобы этот компонент понял, какие данные я хочу получить?

Пример : Приложение. js будет включать три дубликата одного компонента и передавать разные реквизиты ,

<Component nameOfDataToBeFetched={'1'} />
<Component nameOfDataToBeFetched={'2'} />
<Component nameOfDataToBeFetched={'3'} />

Но в принимающем компоненте я хочу получать данные из определенного json API, используя этот реквизит.

fetch('www.example.com/api')
     .then(response => response.json)
     .then(json => setData(json.nameOfDataToBeFetched.value)

Я имею в виду, я могу просто сделать условную выборку в зависимости от реквизита, но есть ли способ извлечь специфические c данные с помощью реквизита?

Answer 1

Будет ли это ответом на ваш вопрос?

// Component.js

componetDidMount(){
  const url = `example.com/api/${this.props.nameOfDataToBeFetched`;
/*
// Any other composition
 const url = `example.com/api?dataName=${this.props.nameOfDataToBeFetched`;
*/
  fetch(url)
  // ...
}

Answer 2

Вы можете использовать только один компонент и проходить разные реквизиты.

componetDidMount(){
  fatchData(this.props.nameToBeFetched)
}


componetDidUpdate(prevProps, prevState){
  if(prevProps.nameToBeFetched !== this.props.nameToBeFetched){
    fetchData(this.props.nameToBeFetched)
    }
}
async function fetchData(nameToBeFetched){
}