Using array mapping with hooks

Question

I'm trying to use the react-barcodes library and it's really fantastic. The problem I'm having is using hooks (which must be declared at the top of the function, non-conditionally, etc.) and also iterate through an array to use different values for the bar code. I think this is a more general React and hooks issue than anything specific to react-barcodes. The example provided [here][1] works just great. However, here's what I'm trying to do:

import { useBarcode } from "react-barcodes";

const BarCodeTest = (props) => {
  var data = [
    {
      barCodeValue: "123",
    },
    { barCodeValue: "456" },
  ];

  // I want to change the "value" property here for each
  const { inputRef } = useBarcode({
    value: "initial value of some kind",
    options: {
      displayValue: true,
      height: 50,
    },
  });

// how can I set the value property as I iterate through data[]?  
return <>{data && data.map((item, index) => <svg ref={inputRef} />)}</>;
};

export default BarCodeTest;


  [1]: https://github.com/Bunlong/react-barcodes#-usage

The code painter · Accepted Answer · 2020-10-17 15:45:20Z

1

you can actually break this into two components one is what you currently have and they other you can call it BarCodeItem and you can iterate over your data and send barcodeValue as a prop to BarCodeItem and then you can handle the hook easily like this below : this how you would go about things generally in react .

import React, { useRef } from "react";
import { useBarcode } from "react-barcodes";


const BarCodeItem = ({barcodeValue}) => {

  const { inputRef } = useBarcode({
    value: barcodeValue,
    options: {
      displayValue: true,
      height: 50,
    },
  });

  return <svg ref={inputRef} />;
};

const BarCodeTest = (props) => {
  var data = [
    {
      barCodeValue: "123",
    },
    { barCodeValue: "456" },
  ];

// how can I set the value property as I iterate through data[]?  
return <>{data && data.map((item, index) => <BarCodeItem key={index} barcodeValue={item.barCodeValue} />)}</>;
};


export default BarCodeTest;

answered Oct 17, 2020 at 15:45

The code painter

1,7743 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mateoc15 Over a year ago

Gorgeous, thanks so much! I figured it was something relatively simple.

The code painter Over a year ago

yeah very simple indeed

Collectives™ on Stack Overflow

Using array mapping with hooks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related