How to make a record in an array of data selected by default?-CodePudding

I've certain records populated from json data as below

const data = [
    { country: { id: 1, cntryShortName: "USA", corpName: "USA Brad", status: "" } },
    { country: { id: 2, cntryShortName: "USA", corpName: "USA Bayker", status: ""} },
    { country: { id: 3, cntryShortName: "CAN", corpName: "Canada Zyphus", status: "" } },
    { country: { id: 4, cntryShortName: "USA", corpName: "USA Hamilton", status: "" } },
    { country: { id: 5, cntryShortName: "CAN", corpName: "Canada Sterling", status: "" } },
    { country: { id: 6, cntryShortName: "CAN", corpName: "Canada Stones", status: "" } },
    { country: { id: 7, cntryShortName: "USA", corpName: "USA Global Exchange", status: "" }},
    { country: { id: 8, cntryShortName: "USA", corpName: "USA Wrights", status: "" } },
    { country: { id: 9, cntryShortName: "GERMANY", corpName: "German Moto", status: "" } },
    { country: { id: 10, cntryShortName: "GERMANY", corpName: "German Wines", status: "" }},
    {country: {id: 11, cntryShortName: "GERMANY", corpName: "German Plastics", status: ""}},
    {country: { id: 12, cntryShortName: "CAN", corpName: "Canada Electronics", status: "" }}
  ];

My intention is that I want to keep record no 5 with data as cntryShortName: "CAN", corpName: "Canada Sterling" keep selected by default

I have written the following code to make it active

const [busiData, setBusiData] = useState(data);

const getDefaultId = () => {
const newState = busiData.map(obj => {
      obj.status = "";
      if (obj.id === 5){
        return {...obj, status: "active"}
      }
      return (obj)
    })

    setBusiData(newState);
}

useEffect(() => {
    getDefaultId()
}, [])

As you can see from above code I'm trying to hard code the value and making that 5th record select by default but, no output. Any possible solution highly appreciated

CodePudding user response：

You forgot that you have country attribute as root key on each element inside array, do like this:

 const getDefaultId = () => {
        const newState = busiData.map(obj => ({...obj, country: { ...obj.country, status: obj.country.id === 5 ? "active" : ""}}))  
    
        setBusiData(newState);
    }

CodePudding user response：

Probably you forgot the country key part in you array

you can try something like this

const [busiData, setBusiData] = useState(data.map(d => d.country));

const getDefaultId = () => {
const newState = busiData.map(obj =>  obj.id === 5 ?
        {...obj, status: "active"}: {...obj, status: ''}
    )

    setBusiData(newState);
}

useEffect(() => {
    getDefaultId()
}, [])

CodePudding user response：

You can't find id correctly, as you can see in your json row that you have a country object and then you have id So you access id directly instead access the country object, you can see the below code.

const [busiData, setBusiData] = useState(data);

const getDefaultId = () => {
const newState = busiData.map((obj, index) => {
      obj.country.status = "";
      if (obj.country.id === 5){
        busiData[index].country.status = "active"
      }
      return (obj)
    })

    setBusiData(newState);
}

useEffect(() => {
    getDefaultId()
}, [])