Children

Das children-Prop ist ein spezielles Prop, welches wir einer Komponente mitgeben können. Der Name children ist vorgeben und nicht veränderbar.

Das children-Prop erhält die Daten, die zwischen dem öffnenden uns schliessendem Tag unserer Komponente sind.

children-Prop übergeben

<div className="buttons">
  <Button
    backgroundColor="#7950f2"
    textColor="#ffffff"
    onClick={handlePrevious}
  >
    👈 Previous
  </Button>
  <Button
    backgroundColor="#7950f2"
    textColor="#ffffff"
    onClick={handleNext}
  >
    Next 👉
  </Button>
</div>

children-Prop annehmen

const Button = ({ textColor, backgroundColor, onClick, children }) => {
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: backgroundColor, color: textColor }}
    >
      {children}
    </button>
  );
}

export default Button;