OnClick, передача значений другому компоненту

Не уверен, что полностью понимаю вопрос, но вот ваш пример с контекстом, который полезен, если вы не хотите заниматься бурением. Valueslist имеет те же значения, что и случайно сгенерированные числа при нажатии кнопки.

Код: https://codesandbox.io/s/problem-forked-ig1mhr?file=/src/App.js

номерконтекст.js

import { useContext, createContext, useState } from "react";

// Create empty context
export const NumberContext = createContext();

// Create a hook to use the context
export function useNumberContext() {
  return useContext(NumberContext);
}

// Create context provider, wrap the provider around the parent component
// whos children you want to recive the values
export function NumberContextProvider({ children }) {
  const [valuelist, setValueList] = useState([]);
  const [values, setValues] = useState({
    Diameter: 1,
    Friction: 1,
    Quantity: 1
  });

  function setValue(key, newValue) {
    setValues({ ...values, [key]: newValue });
  }

  function getRandNUm(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  const addValueList = () => {
    let a = getRandNUm(0, 10);
    let b = getRandNUm(0, 10);
    let c = getRandNUm(0, 10);
    setValues({
      Diameter: a,
      Friction: b,
      Quantity: c
    });
    setValueList([a, b, c]);
  };

  return (
   /* set the values and function you want to access */
    <NumberContext.Provider
      value = {{
        values: values,
        valuelist: valuelist,
        setValue: setValue,
        addValueList: addValueList
      }}
    >
      {children}
    </NumberContext.Provider>
  );
}

App.js

import React from "react";
import "./styles.css";
// import the context and the NumberContextProvider to wrap components
import { useNumberContext, NumberContextProvider } from "./numberContext";

function LaunchResults({ launchName }) {
  return (
    <div>
      <div className = "launchName">{launchName}</div>
    </div>
  );
}

function ValueContainer({ valueName }) {
  // access the values from the context
  const { values } = useNumberContext();

  return (
    <div>
      <p>{valueName}</p>
      <div className = "valueContainer">
        {/* Get the value assigned to valuName key */}
        <span>{values[`${valueName}`]}</span>
      </div>
    </div>
  );
}

export function Container() {
  // Access the context
  const { valuelist, addValueList } = useNumberContext();

  return (
    <div className = "App">
      {/* Run addValueList function from context on click*/}
      <button onClick = {addValueList}>Dead</button>
      <>
        {valuelist.map((item, item_id) => (
          <LaunchResults
            key = {item_id}
            launchName = {item}
            launchDiameter = {item.diameter}
            launchFriction = {item.friction}
          />
        ))}
      </>
      <ValueContainer valueName = {"Diameter"} />
      <ValueContainer valueName = {"Friction"} />
      <ValueContainer valueName = {"Quantity"} />
    </div>
  );
}

export default function App() {
  return (
    // Wrap the Privider around the consumers then you can access
    // context inside container and all its children
    <NumberContextProvider>
      <Container />
    </NumberContextProvider>
  );
}