ReactJS: Pass Data from child to parent

Question

I just picked up React and can not solve this problem.

I have a search component that is embedded within the main app component. Within the search comp I make an API call with the input value from the search bar. But I do not know how I can get the Data back to the parent (where I currently use a hard coded state object similar to the data the API would return), to pass I to another component.

Basically: Get data from API within the Child, pass it to the parent and pass it down to 2 other childs

import React, {Component} from 'react';
import GroupItem from './components/GroupItem'
import SearchBar from './components/SearchBar'

class App extends Component {

  state = {
    views: [
        {
            name: 'Testname',
            description: 'testbeschreibung',
            status: 'ok'
        },
        {
            name: 'Ein Anderer Titel',
            description: 'lorem ipsum',
            status: 'ok'
        }
    ],
    commands: [
        {
            name: 'Wieder etwas',
            description: 'testbeschreibung',
            status: 'ok'
        }
    ],
    search : []
}


render()
{
    return (
        <div>
            <SearchBar/>
            <h2>Views </h2>
            {this.state.views.map((view) => (<GroupItem data={view} type={'view'} />))}
            <h2>Commands</h2>
            {this.state.commands.map((command) => (<GroupItem data={command} type={'command'} />))}
        </div>
    );
}
}

export default App;


import React, {Component} from 'react';

class SearchBar extends Component {

    callApi(){
        let search = this.refs.search.value;
        fetch('http://my-awesome.api/'+search)
            .then((result) => {
                return result.json();
            }).then((jsonResult) => {
            console.log(jsonResult);
        })
    }

    render() {
        return (
            <div class="input-group mb-3" id="search">
                <input type="text" class="form-control" ref="search" placeholder="URL" aria-label="URL" />
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" onClick={() => this.callApi()}>Search</button>
                    </div>
            </div>
        );
    }
}

export default SearchBar;

Answer 1

You need to pass a handler from App Component has a prop and have it update the state, please check the code below I have edited it.

import React, {Component} from 'react';
import GroupItem from './components/GroupItem'
import SearchBar from './components/SearchBar'

class App extends Component {

  state = {
    views: [
        {
            name: 'Testname',
            description: 'testbeschreibung',
            status: 'ok'
        },
        {
            name: 'Ein Anderer Titel',
            description: 'lorem ipsum',
            status: 'ok'
        }
    ],
    commands: [
        {
            name: 'Wieder etwas',
            description: 'testbeschreibung',
            status: 'ok'
        }
    ],
    search : []
}

handleSearchFill = (data) =>{
  this.setState({search:data})
}


render()
{
    return (
        <div>
            <SearchBar searchFill={this.handleSearchFill}/>
            <h2>Views </h2>
            {this.state.views.map((view) => (<GroupItem data={view} type={'view'} />))}
            <h2>Commands</h2>
            {this.state.commands.map((command) => (<GroupItem data={command} type={'command'} />))}
        </div>
    );
}
}

export default App;


import React, {Component} from 'react';

class SearchBar extends Component {

    callApi(){
        let search = this.refs.search.value;
        fetch('http://my-awesome.api/'+search)
            .then((result) => {
                this.props.searchFill(result.json());
            }).then((jsonResult) => {
            console.log(jsonResult);
        })
    }

    render() {
        return (
            <div class="input-group mb-3" id="search">
                <input type="text" class="form-control" ref="search" placeholder="URL" aria-label="URL" />
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" onClick={() => this.callApi()}>Search</button>
                    </div>
            </div>
        );
    }
}

export default SearchBar;