Issues

Parent component

1. this isn't bound correctly in constructor for handleClick.

Child component.

1. openTasks is a functional component, so there is no this, or rather, this will just be undefined.
2. openTasks doesn't consume any of the props passed to it.

To answer questions

Is there a way to target the className of a particular child element and update it?

You could do this, but direct DOM manipulations and reaching into other components to change things is anti-pattern in React. The react way is to pass data as props (data including what is or isn't "active") and letting children components handle it locally.

Is it instead better to handle this function in the child itself while storing the id of the 'active' child in the state of the parent component?

No, I don't think so, the parent should store the single source of truth about the current "active" child. Pass props to the child, including any callbacks the child could/should call to update state in the parent.

Solution

The parent component should store the active child, as you've done, but you should pass the active id and a callback to the children in order for them to be "clickable" and allow the parent to update what the active child is.

OpenTaskAccordion

1. Fix the this binding in the constructor
2. Update handleClick to consume a task id to toggle active state of
3. Pass active state and onClick callback to Task

code

class OpenTaskAccordion extends Component {
  constructor() {
    super();
    this.state = {
      active: -1
    };
    this.handleClick = this.handleClick.bind(this); // <-- fix this binding
  }

  handleClick(id) { // <-- consume task id
    this.setState((prevState) => ({
      ...prevState,
      active: id === prevState.active ? -1 : id 
    }));
  }

  render() {
    const { active } = this.state;
    const { tasks = [] } = this.props;

    return tasks.map((task) => (
      <OpenTask
        key={task.id}
        active={active}
        task={task}
        onClick={this.handleClick}
      />
    ));
  }
}

OpenTasks

1. Remove all the this references since this is a functional component.
2. Consume props object.
3. Add an "active" class if props.active matches the current task id.
4. Attach props.onClick to something clickable to toggle the active state in parent.

code

function OpenTask(props) { // <-- consume `props`!!
  return (
    <div
      id={props.task.id}
      className={["tasks", props.active === props.task.id && "active"].join(" ")}
      value={props.task.id}
      onClick={() => props.onClick(props.task.id)} // <-- attach onClick callback
    >
      <h1>{props.task.clientName}</h1>
      <div className="accordion-item accordion-item-closed">
        <h2>{props.task.matter}</h2>
        <p> - {props.task.matterStatus}</p>
      </div>
    </div>
  );
}

CSS used to apply an "animation" for active item toggling. Uses a simple CSS transition on the background color.

.tasks {
  transition: background-color ease-in-out 0.5s;
}

.active {
  background-color: lightblue;
}

Comment Questions

In the functional child component, where can I read about what this is doing? className={["tasks", props.active === props.task.id && "active"].join(" ")}

It is simply a way to create a list of space-separated class names, i.e. "tasks" or "tasks active" from ["tasks"] or ["tasks", "active"].

Some alternative methods include

className={`tasks ${props.active === active ? "active" : ""}`}
className={"tasks" + `${props.active === active ? " active" : ""}`}

In the parent class component, what is this doing and why isn't {tasks =[] } overridden by the data set you created in your example?

const { active } = this.state;
const { tasks = [] } = this.props;

const { tasks = [] } = this.props; is just a way to provide a defined value for the mapping in the case that this.props.tasks is undefined (or falsey), as would be the case if a tasks prop was not passed to the component. So long as this.prop.tasks is a defined truth value then that is what is used. Consider this a fallback value.