Vfrdtyky

Everything I have tried from what I can find doesn't seem to be working. I'm really curious how to access and edit grandchild objects located in the state with react. If anyone could tell me what I'm doing wrong, it would be very helpful.

https://codesandbox.io/s/0mo32q85pp

Take a look at the following code...

App.js

lines: 41-58

getHomeworld = URL => {

  fetch(URL)

    .then(res => {

      return res.json();

    })

    .then(homeWorldObject => {

      console.log(homeWorldObject);

      // this.setState({ <- Why isn't this working????

      //   ...this.state.starwarsChars,

      //   ...this.state.nextPage,

      //   ...this.state.prevPage,

      //   ...this.state.starwarsChars.homeworld = homeWorldObject

      // });

    })

    .catch(err => {

      throw new Error(err);

    });

};

lines: 86-89

<CharacterList

  characters={this.state.starwarsChars}

  getHomeworld={this.getHomeworld}

/>

CharacterList.js

lines: 8-12

<Character

  key={character.name}

  characterDetails={character}

  getHomeworld={props.getHomeworld}

/>

Character.js

lines: 18-29

{Object.keys(props.characterDetails).includes("homeworld") ? (

  <div className="character-homeworld">

    <Homeworld

      homeworld={props.getHomeworld(props.characterDetails.homeworld)}

    />

  </div>

) : (

  <div className="character-homeworld">

    <h4>Homeworld</h4>

    <p>None</p>

  </div>

)}

Homeworld.js

lines: 7-10

<div className="homeworld-details">

  <p>Name: {props.name}</p>

  <p>Rotation Period: {props.rotation_period}</p>

</div>

Expected Output:
If you look on the sandbox webpage, the "Name" and "Rotation Period" (Under "Homeworld") should display the values from here: https://swapi.co/api/planets/1/

Is there anyone who can help me figure this out?

EDIT:

I got really close making these changes (using my local machine, the code on the sandbox is still the original)...

App.js

let temp = {...this.state.starwarsChars} // use spread operator to clone it, so you don't mutate state on next line;

for (let character in temp) {

  if (temp[character].homeworld === URL) {

    temp[character].homeworld = homeWorldObject;

  }

}

// console.log(temp);

this.setState({

  starwarsChars: temp

});

Character.js

const Character = props => {

  props.getHomeworld(props.characterDetails.homeworld);

  console.log(props.characterDetails); // returns object{homeworld: {object}}

  console.log(props.characterDetails.homeworld); // returns url

and...

<div className="character-homeworld">

  <Homeworld

    homeworld={props.characterDetails.homeworld}/>

</div>

However, the issue now is if I do console.log(props.characterDetails.homeworld);, it logs homeworld: url

and...

if I do console.log(props.characterDetails);, it logs the property of the character object as homeworld: {object}

...

What I want is the 2nd one, and I'm not sure why it's not consistent.

Update

For some strange reason, codesandbox is console logging both urls, and when I run with yarn start, it logs the url for one, and the object for another. Because of this... I am adding the github link here -> https://github.com/jamespagedev/Sprint-Challenge-React-Wars (so the error can properly be reproduced)

Edit 2:

I changed the sandbox code to the following so we are now only worrying about the code in 1 file -> https://codesandbox.io/s/0mo32q85pp

Here is the issue I am now seeing, and I'm not sure how to solve it...

getHomeworld = URL => {

  let home;

  fetch(URL)

  .then(res => res.json())

  .then(homeWorldObject => {

    home = homeWorldObject;

    console.log(home); // home is an object

  });

  console.log(home); // why is home undefined?

  return home;

};

I've tried doing return homeWorldObject, but the main function just returns undefined. After doing the console logging, that was what I found, and I'm not sure why that is happening...

Because setState doesn't handle nested properties. You can create a dummy object (a clone of states' object), mutate it, and apply in setState:

   let temp = {...this.state.starwarsChars} // use spread operator to clone it, so you don't mutate state on next line;

   temp.homeworld = homeWorldObject

   this.setState({

     starwarsChars: temp

   });

p.s. don't use this.state in setState. Also don't need to pass in states' properties you are not mutating (like ...nextPage etc.)

The propblem is the ways that passed properties.

'props.getHomeworld' is a function and have no return value here.So "props.getHomeworld(props.characterDetails.homeworld)" dispatches getHomeworld function,but the whole value is null,so the props in Homeworld component is null.

<Homeworld

      homeworld={props.getHomeworld(props.characterDetails.homeworld)}

    />

"setState" in getHomeworld in App.js is set state for APP.js not the headline.js.And because getHomeWorld is asynchronous and will dispatch many times.Every time it runs, it will override the last property in App.js.I recommand you pass only the URL to headline and define the getHomeworld function in headline.js

<Homeworld

      url={props.characterDetails.homeworld}

    />

About the type question.In this part:

if (temp[character].homeworld === URL) {

    temp[character].homeworld = homeWorldObject;

  }

You have change the type of homeworld.If "if..." is true, change string to object, however,"if..." is false, the type of homeworld will still be object.I recommend you don't change type, maybe set another property for this.BTW,in CharacterList.js,props.characters is an object not an array,so can't use map for that.