Updating props from child component in React JS

Don't store props into state in child component,

avalilableShops: this.props.avalilableShops,

Instead you can directly use props to iterate and show your data in child component,

const rows = this.props.avalilableShops.map((record,index) => {   //access data using this.props
   ...
}

Do the same for shops,

{this.props.shops.map((shops, index) => (  //access shops using this.props
     <option key={index} value={shops.name}>
         {shops.name}
     </option>
))}

As you need data to be accessible in parent component you should have a function in parent component which will change the state in parent component. Pass that funtion to child component,

Create a function in parent component,

createShops = (phoneInfo) => {
   this.setState({
     avalilableShops: [...this.state.avalilableShops, phoneInfo]
   }, ()=>{ console.log(this.state.avalilableShops)});
}

pass this function to child component,

<Child 
     shops = {this.state.shops}
     onChange = {this.handleInputChange}
     avalilableShops = {this.state.avalilableShops}
     createShops = {this.createShops}
/>  

Now in child component you need to call the function in parent component to update the state,

createShops(e){

    e.preventDefault();
    let shopName = this.state.shop_name;
    let phonePrice = this.state.phone_price;

    const phoneInfo = {'shop_name':shopName, 'phone_price':phonePrice};

    this.props.createShops(phoneInfo);  //This will update the state in parent component.
}

I have updated in your code and make it working for you.

Here I have created demo for you
https://codesandbox.io/s/smoosh-night-33yn4

Parent Component

constructor(props) {
    super(props);
    this.state = {
      availableShops: []
    };
    this.createShops = this.createShops.bind(this);
  }

  createShops(shop_name, phone_price) {
    this.setState(preState => ({
      availableShops: [...preState.availableShops, { shop_name, phone_price }]
    }));
  }

  render() {
    return (
      <div>
        <Child
          createShops={this.createShops}
          availableShops={this.state.availableShops}
        />
      </div>
    );
  }

Child Component

import React, { Component } from "react";
export default class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shop_name: "Shop 1",
      phone_price: ""
    };
    this.shops = [{ name: "Shop 1" }, { name: "Shop 2" }, { name: "Shop 3" }];
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const rows =
      this.props.availableShops &&
      this.props.availableShops.map((record, index) => {
        return (
          <tr key={index}>
            <td>{record.shop_name}</td>
            <td>{record.phone_price}</td>
            <td>
              <button
                type="button"
                className="btn btn-primary"
                // onChange={this.createShops}
              >
                Delete
              </button>
            </td>
          </tr>
        );
      });

    return (
      <div>
        <label>Add shops that phone already available...</label>
        <div className="row">
          <div className="col-md-6">
            <div className="form-group">
              <select
                name="shop_name"
                className="form-control select2"
                onChange={this.handleInputChange}
              >
                {this.shops &&
                  this.shops.map((shops, index) => (
                    <option key={index} value={shops.name}>
                      {shops.name}
                    </option>
                  ))}
                ;
              </select>
            </div>
          </div>
          <div className="col-md-4">
            <div className="form-group">
              <input
                type="number"
                name="phone_price"
                placeholder="Price"
                className="form-control"
                value={this.state.phone_price}
                onChange={this.handleInputChange}
              />
            </div>
          </div>
          <div className="col-md-2">
            <button
              type="button"
              className="btn btn-primary"
              onClick={() => {
                debugger;
                const { shop_name, phone_price } = this.state;
                this.props.createShops(shop_name, phone_price);
              }}
            >
              Add
            </button>
          </div>
        </div>
        <br />
        <table className="table table-striped">
          <thead>
            <tr>
              <th scope="col">Shop name</th>
              <th scope="col">Price</th>
              <th scope="col">Remove</th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      </div>
    );
  }
}

Output

Hope this will work for you!

I would avoid maintaining state of avialableShops in both the parent and child. Rather, I would maintain state of the availableShops only in your parent component, which can be updated by passing a function to the child component. The child component can access the available shops by way of the parents state through props, and should rerender when the parent's state/its props are updated. Here a simplified solution:

export default class Parent extends Component {

    constructor(props) {
        super(props);
        this.state = { availableShops:[] }
    }

    handleUpdateShops = newShop => {
      { availableShops: oldShops }  = this.state;
      this.setState({ availableShops: [...oldShops, newShop] });
    }

    render{
           return (
             <div>
                 <Child 
                    {...this.props}
                    {...this.state}
                    handleUpdateShops={this.handleUpdateShops}
                  />  
             </div>
           );
          }
       }


export default class Child extends Component {

         constructor(props) {
           super(props);
         }

     handleInputChange(e) {
       ...
      }

    createShops(e) {

          e.preventDefault();
          let shopName = this.state.shop_name;
          let phonePrice = this.state.phone_price;

          const phoneInfo = {'shop_name':shopName, 'phone_price':phonePrice};
          this.props.handleUpdateShops(phoneInfo);
    }

     render() {
      // this.props.availableShops available to map here
    }
  }