reactjs - pass a prop as a string, then convert string back into javascript

Question

I am trying to build a reusable carousel that will have much different conditions.

So i need to be able to set this "imageQuery" on my display page, sending it as a string, and then in my carousel, render it as usable javascript

the query works if I just hard code it in, I am just trying to build upon it

My display page has this

const imageQuery = 'arts.fineartfields.finehome === "Yes"';
    
<MyCarousel 
  finearts={finearts} 
  imageQuery={imageQuery} 
  />

my carousel page has this

export default function MyCarousel({ finearts, imageQuery }) {
    
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

    
    
  return (
    <Carousel 
      activeIndex={index} 
      onSelect={handleSelect} 
      className="carousel-fade">

      {finearts.nodes && finearts.nodes.map((arts) => (
        {imageQuery} ?
          <Carousel.Item className="" key={arts.databaseId}>
                            
          <Image src={arts.fineartfields.cloudlink} 
                 alt={arts.featuredImage.node.altText} 
                 className="carousel-image img-fluid shadow-sm"
                 width={arts.featuredImage.node.mediaDetails.width}
                 height={arts.featuredImage.node.mediaDetails.height}
                 />
          </Carousel.Item>
        : null  
      ), [])}

    </Carousel>
  )
}

question from:https://stackoverflow.com/questions/65838230/pass-a-prop-as-a-string-then-convert-string-back-into-javascript

Answer 1

You don't need to pass imageQuery props

<MyCarousel finearts={finearts} />

Carousel component

export default function MyCarousel({ finearts }) {
    
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

    
    
  return (
    <Carousel 
      activeIndex={index} 
      onSelect={handleSelect} 
      className="carousel-fade">

      {finearts.nodes && finearts.nodes.map((arts) => (
        arts.fineartfields.finehome === "Yes" ? (
          <Carousel.Item className="" key={arts.databaseId}>
                            
               <Image src={arts.fineartfields.cloudlink} 
                 alt={arts.featuredImage.node.altText} 
                 className="carousel-image img-fluid shadow-sm"
                 width={arts.featuredImage.node.mediaDetails.width}
                 height={arts.featuredImage.node.mediaDetails.height}
               />
          </Carousel.Item>
        ) : null  
      ), [])}

    </Carousel>
  )
}