How to properly pass data from component to component without redux?

Question

React

Good afternoon, I asked this question, but I will rephrase it with code.
There is a component that stores input :

class someClass extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }

    state = {
        searchValue: ''
    }
    onSearchChange = (event, searchValue) => {
        this.setState({ searchValue })
    }
    onSearchClick = () => {
        const { searchValue } = this.state;
        fetch("someuri?name="+searchValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));

  }
return(
<Input leftIcon={<Icon name="search" />}
                        value={this.state.searchValue}
                        width="750px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
)

here we enter a value, do a search by json and logically output it to the child.
Here is the daughter:

class SearchHub extends Component{

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }
  

  render(){
    const { error, isLoaded, items } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <Loader type="big" active> </Loader>;
} else {
  return (
    <div className={styles.parent}>
      <div>
        {items.map(item => (
          <Gapped gap={20} key={item.name}>
            <span><b>{item.rating.totalLove}</b></span>
            <span><img src={shape} alt="heart"/></span>
            <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
            <span>{item.name}<br/>{item.role}</span>
          </Gapped>
        ))}
      </div>
    </div>
    );
}
}
}

At what stage am I. The data is entered and when the button is pressed, a search is performed, I output to the console and it displays the correct value, in fact the data is stored in items . But how can I pass them to my daughter for display?
I don't use redux due to learning reactjs and it's a SPA where redux is unnecessary.

Answer 1

But how can I pass them to my daughter for display?

<SearchHub error={error} isLoaded={isLoaded} items={items} />

The "daughter" itself will look a little different than what you have now, something like this:

class SearchHub extends Component {
  render(){
    const { error, isLoaded, items } = this.props;

    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <Loader type="big" active> </Loader>;
    } else {
      return (
        <div className={styles.parent}>
          <div>
            {items.map(item => (
              <Gapped gap={20} key={item.name}>
                <span><b>{item.rating.totalLove}</b></span>
                <span><img src={shape} alt="heart"/></span>
                <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
                <span>{item.name}<br/>{item.role}</span>
              </Gapped>
            ))}
          </div>
        </div>
      );
    }
  }
}

You also have a jamb when receiving data - you should set isLoaded: false before the request and reset the error value, otherwise the loading indicator will not be visible, and after the first error it will be impossible to see any more data.

Answer 2

strange question, if it is asked correctly, then the question is how to pass data to child components, the answer is obvious - props
if the task is to transfer from one component to another (when none of the components is a parent or child), then they can be wrapped in one component, the sending component must have a callback function from the stateOnChanged series, in the parent this change is fixed in the state to which the receiving component is subscribed, then the data also runs through the props.