CODEWITHSUNDEEP
javascriptreactjsconstantsjsx
DarthVader
DarthVader

Reputation: 3

Is there a way to reference a constant using a string in javascript/JSX (React framework)

import building from '../../../public/lotties/building.json'
import chest from '../../../public/lotties/chest.json'
import clock from '../../../public/lotties/clock.json'
import creditcard from '../../../public/lotties/creditcard.json'
import dnalottie from '../../../public/lotties/dna.json'
import engineering from '../../../public/lotties/engineering.json'
import handshake from '../../../public/lotties/handshake.json'
import hospital from '../../../public/lotties/hospital.json'
import map from '../../../public/lotties/map.json'
import navpinsfalling from '../../../public/lotties/navpinsfalling.json'
import radar from '../../../public/lotties/radar.json'
import rocket from '../../../public/lotties/rocket.json'
import student from '../../../public/lotties/student.json'
import teacher from '../../../public/lotties/teacher.json'
import tree from '../../../public/lotties/tree.json'
import trophy from '../../../public/lotties/trophy.json'
import virus from '../../../public/lotties/virus.json'
import wallet from '../../../public/lotties/wallet.json'

I have a GenericLottie Component and I want to pass in a prop like 'wallet' and reference the imported constant.

    const animData = this.props.name;
    //
    const animData = {this.props.name};
    //
    const animData = `${this.props.name}`;

I've tried all the above lines of code, none of them work. It's clear I need to review string literals and how they work. Is there a workaround to my problem? If not, I can go through and code each one individually, I'd prefer not to.

Upvotes: 0

Views: 350

Answers (1)

gaddes
gaddes

Reputation: 99

I think what you're wanting to do is this? Written using functional component rather than class, so there's no need for this when referencing props.

SomeOtherComponent.js

import wallet from '../../../public/lotties/wallet.json';
import GenericLottie from '../../wherever';

const SomeOtherComponent = () => {
  return <GenericLottie name={wallet} />;
};

GenericLottie.js

const GenericLottie = (props) => {
  // This should be the 'wallet' you imported in the parent component!
  const animData = props.name;

  ...
};

Upvotes: 1

Related Questions