Data can be passed to components via props.

https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props

In your case props would be accessed inside the components via this.props.

<TodoList /> takes a prop called items which is an array. Inside <TodoList /> you can map through that array and return elements.

For example in the render method of your class you would return TodoList with a prop of items:

const myItems = [{ name: 'item 1' }, { name: 'item2' }];
function MyApp() {
    return (
       <TodoList items={myItems} />
    );
}

Then in TodoList you map the items

function TodoList({ items }) {
    return items.map(item => (
        <h1>{item.name}</h1>
    ));
}

FetchDataComponent is not really a react component since it does not render anything. It looks more like this is custom hook. To make that a hook, just make it simple function that calls other hooks:

const useFetchedData = () => {
    const [data, setData] = useState({ product: [] })
    useEffect(
        () => {
            (async () => {
                const result = await axios.get(
                    '/products-data'
                )
                setData(result.data)
            })()
        }, [])

    const mappedData = _.map(data.product, "proizvod_naziv")

    return mappedData
}

export default useFetchedData;

And now you can use that hook's return value to get the data you want and pass that to other components.

const ReactSelectComponent = () => {
    const mappedData = useFetchedData()
    const options = mappedData.map(value => ({ value, label: value }))
    return (<Select options={options}/>)
}
export default ReactSelectComponent;

Read more about custom hooks here.

First use map to create progress bar for each entry of array, then return from the component.

Write it like this:

const ProgressBar = ({groups, heightSize}) => {

    let heightSize = 10;   /*calculate here*/

    const GroupProgressBar = groups.map((group, i) => (
          <progress
              key = {i}
              {...customProps}
              heightSize = {heightSize}
              style={{ color: group.color }}
              className={classes}
              max={100}
              value={group.value}
              aria-valuemax={100}
              aria-valuemin={0}
              aria-valuenow={normalizedValue}
              tabIndex="-1"
          />
        )
    )

    return <div> {GroupProgressBar} </div>
}

Check the DOCs for more details.

Update:

See we can pass any no of props from parent component, props is an object that contains all the data. In functional component, we need to write it like this:

const ProgressBar = (props) => {
    console.log(props);
}

Here props will contain all the data and method passed, you can access any passed value by props.keyName, pass the height and groups from parent and access them by props.groups and props.height.

Another way is:

const ProgressBar = ({groups, heightSize}) => {
    console.log(groups, heightSize);
}

this is nothing but the object destructuring, now we can use these values directly by groups and heightSize.

Note: Assign the unique key to each progress bar inside map, i used item index but that is not a good way, so assign some unique value from group object.