I know this could be a noob question but I'm learning React for a few months and now I'm stucked with this problem. I got this code over here:

import React, { useCallback, useEffect, useRef, useState } from 'react'
import ReactTags from 'react-tag-autocomplete'

const TagsHandler = ({ tagPlaceholder, suggestions }) => {
  const [tags, setTags] = useState([])
  const reactTags = useRef()

  const onDelete = useCallback(
    (tagIndex) => {
      setTags(tags.filter((_, i) => i !== tagIndex))
    },
    [tags]
  )

  const onAddition = useCallback(
    (newTag) => {
      setTags([...tags, newTag])
    },
    [tags]
  )

  useEffect(() => {
    suggestions.map((suggestion) => {
      suggestion.disabled = tags.some((tag) => tag.id === suggestion.id)
    })
  }, [tags])

  return (
    <ReactTags
      ref={reactTags}
      tags={tags}
      suggestions={suggestions}
      onDelete={onDelete}
      onAddition={onAddition}
      placeholderText={tagPlaceholder}
    />
  )
}

export default TagsHandler

Which implements a tag list inside my parent component. This parent component has a bool value which enables a save button. I should enable this button whenever a user adds or removes a tag to the list. My question is: how can I handle this bool from the child component? I've read about Redux but I'd like to avoid using it. I was thinking about a SetState function or a callback but I can't figure out the syntax. Any help would be really appreciated, thanks :)

CodePudding user response：

You can simply create a function in your parent component: toggleButton, and pass the function to your child component.

function Parent = (props) => {
    const [isToggle, setIsToggle] = useState(false);

    const toggleButton = () => {
          setIsToggle(!isToggle)
    }

    return <Child toggled={isToggle} toggle={toggleButton} />
}

CodePudding user response：

It can be implemented by using the method of event publishing and subscription. Define events in the parent component, trigger events and transfer parameters in the child component, and change the value of variables after the function of the parent component is triggered

CodePudding user response：

So the general approach is as follows:
In the Parent.jsx:

const [childrenActive, setChildrenActive] = useState(false)

// later in the render function
<Children setIsActive={(newActive) => setChildrenActive(newActive)} />

In the Children.jsx:

const Children = ({ setIsActive }) => {
    return <button onClick={() => setIsActive(true)}>Click me</button>
}

So, as you have guessed, we pass a callback function. I would avoid passing setState directly because it makes your component less flexible.

CodePudding user response：

In the parent component, the function that is responsible for changing that bool variable, you pass as a prop to the child component. At the child component you get that props and you can update if you want.