React. Używanie w state props

Witam. Mam problem z przekazaniem propsów do state z rodzica do dziecka. Kod:

Klasa rodzica:

class App extends Component {
  state = { 
    aim: "",
    price: "",
   }
  //handleSaveInformation = (aim, price) =>{
    // this.setState({
    //  aim,
    //  price,
 //   })
 // }

 
  render() { 
    const {aim, price} = this.state;
    return ( 
      <div className="App">
          <FormSaving saveInformation={this.handleSaveInformation} />
          <Panels aim={aim} price={price} />
          <Counters price={price} />
          <Footer />
      </div>
     );
  }
}
 
export default App;

Klasa dziecka (tylko do końca state):

class Counters extends Component{

    price = this.props.price;
//teź było price= props.price
    
    state = {
    howPayed: 0,
    remains: this.price,
// próbowałam też bez przypisania => remains: this.props.price, albo osobno, props.price
    justPaidMoney:0
  }

Nie wiem czy w ogóle taka operacja jest dozwolona (ustawienie do state propsów), ale moim zdaniem powinna być. Nie mam jak tego podpiąć pod setState (żadnego onclicka, jedynie componentDidMount w dziecku i wtedy setState?). Kod który aktualizuje state w rodzicu jest w innym komponecie (można powiedzieć - bracie). Czy jedyną drogą jest tu reorganizacja kodu?

Propsy są przekazane do dziecka (Counters), i bez problemu wyświetlane, nie mogę natomiast zapisać ich do state

Przypisując coś statycznie przypisujesz to raz, czyli zamiast w konstruktorze, to statycznie - a przecież właściwości komponentu mogą się zmieniać dynamicznie, czyli złe narzędzie do tego celu.

Poza tym mieszasz coś strasznie. Co chcesz osiągnąć? Co ma robić komponent Counters? Po co potrzebuje swój stan? Co ma się w nim zmieniać na podstawie czego?

(skreśliłem statycznie, bo faktycznie tam nie ma statycznie, jak ktoś zwrócił mi uwagę, tylko jest skrótowy zapis, tzw. "class properties" zamiast staroświecko przypisać właściwości w konstruktorze)

Zacznijmy od tego, że w klasie rodzica używasz niepotrzebnie destructuringu - aim i price nie są wtedy właściwościami state’a tylko kopiami tych wartości.

LukeJL napisał(a):

Przypisując coś statycznie przypisujesz to raz, czyli zamiast w konstruktorze, to statycznie - a przecież właściwości komponentu mogą się zmieniać dynamicznie, czyli złe narzędzie do tego celu.

Poza tym mieszasz coś strasznie. Co chcesz osiągnąć? Co ma robić komponent Counters? Po co potrzebuje swój stan? Co ma się w nim zmieniać na podstawie czego?

(skreśliłem statycznie, bo faktycznie tam nie ma statycznie, jak ktoś zwrócił mi uwagę, tylko jest skrótowy zapis, tzw. "class properties" zamiast staroświecko przypisać właściwości w konstruktorze)

To jest tak, że są 3 komponenty. Dziecko (formularz), pobiera informacje i przesyła do rodzica. Rodzic (App) posiada state, które przekazuje dalej do n.p Counters. W Counters state jest bardzo potrzebne bo wykonywane są na state działania matematyczne.

Maciej Cąderek napisał(a):

Zacznijmy od tego, że w klasie rodzica używasz niepotrzebnie destructuringu - aim i price nie są wtedy właściwościami state’a tylko kopiami tych wartości.

Tutaj może być racja, zmieniłam co trzeba, jednak nie dało to skutku.
Ale problem już rozwiązałam (przespałam się, rano zasiadłam do laptopa i od razu lepiej niż w nocy myśleć :D a całą noc kodowanie się śniło xd)

Rozwiązałam to tak: Zamiast do state, przypisałam -------- const price = this.props.price -------- pod render. Widocznie jeszcze w state nie było tej danej, stąd null i brak wyświetlania. Kombinowałam coś z cyklem życia komponentu, i pomyślałam, że to w render powinny być już wszystkie dane i dlatego tam to przypisałam. Drugą rzeczą był operator trójkowy:
{this.state.remains === 0 ? remainsFromParent : this.state.remains}

Pokaże cały kod tego dziecka:

import React, { Component } from 'react';


class Counters extends Component{
  
    state = {
    howPayed: 0,
    remains: 0,
    justPaidMoney:0
  }

// to jest tylko obsługa inputa
  handlePay = e => {
    console.log('Wpłacono:' + e.target.value);
    this.setState({
      justPaidMoney: e.target.value * 1,
      remains: this.props.price,
// remains przypisałam w chwili pisania czegoś w inpucie
    })
   
  }
// tutaj dokonujemy obliczeń
  handleCounter = e => {
    e.preventDefault();
    this.setState(prev => ({
      howPayed: prev.howPayed + prev.justPaidMoney,
      remains: prev.remains - prev.justPaidMoney,
    }))

  }

  render(){
// przypisanie do zmiennej
    const remainsFromParent = this.props.price;
   
    return ( 
      <div className="counters">
        <div className="panel">
         <h4> Saved money: </h4>
         {this.state.howPayed} $
        </div>
        <div className="panel">
          <h4>It remains to the end: </h4>
 // operator trójkowy
          {this.state.remains === 0 ? remainsFromParent : this.state.remains} $
        </div>

        <input type="number" value={this.state.justPaidMoney} onChange={this.handlePay} /> $
        <button onClick={this.handleCounter}>Save</button>
      </div>
    );
    }
  }
 
export default Counters;

przekombinowane, ale działa :)