Passing child state to parent in React //

Question

I'm looking to pass my state back up from a child component to parent. And yes I know there is similar online! however this is specifically with the formkit component, and I cannot resolve it.

I have a parent component, which contains a FrameworkList, this is an iterable dropdown which creates an array.

Please see parent:

    <MainContainerWrapper>
      
        <AccordionContainer>
            <FrameworkList ref={parent}/>
        </AccordionContainer>

  </MainContainerWrapper>

And with this, I have a child component. This component has an array called items. When items is changed the state is updated and the array is modified. My goal is to have this array based to parent component so I can complete some Redux dispatch events on an onSubmit. However, if there's a better way to do this in the child component, let me know.

Child:

export default forwardRef(function list(props, ref) {
 
THIS IS THE STATE, items, TO BE PASSED UP.
  const [items, item, addItem, input, sortUp, sortDown, sortList, remove] =
  UseListFunctions([
      { id: 0, name: 'Transparency' },
      { id: 1, name: 'Collaboration' },
      { id: 2, name: 'Flexible working arrangements' },
    ]);

    // console.log(items)

  return (
    
    <StageComponent data-has-animation={ref ? true : null}>
      <div className="logo">
        {(!ref && (
          <img
            src="https://cdn.formk.it/web-assets/logo-auto-animate.svg"
            width="300"
            height="37"
          />
        )) ||
          ''}
      </div>
      <ULComponent ref={ref}>
        {items.map((item) => (
          <ListComponent key={item.id}>
            {/* text is here */}
            {/* <span>{item.name}</span> */}
            <Typography variant="subtitle1" color="black">
                {item.name}
            </Typography>

            <div className="action-icons">
              <button onClick={() => sortUp(item)}>
                <Arrow direction="up" />
              </button>
              <button onClick={() => sortDown(item)}>
                <Arrow direction="down" />
              </button>
              <button className="remove" onClick={() => remove(item)}>
                <Close />
              </button>
            </div>
          </ListComponent>
        ))}
        <ListComponent>

I hope this is relatively well explained. If anyone knows how to pass this array back up, it would be a life saver.

Alternatively, if someone knows how to utilise redux directly in this child component, that would also help. I don't believe I can use the redux dispatch in this component directly.

Answer 1

I encourage you to lift the child's state to the parent component and pass that state down to the child component(s).