How to pass one state value to another state on initialization in react js

Question

I am trying to pass one state value that is imagesArray to another state that is tabData, but it is coming as undefined, PFB the code, please tell what i am doing wrong here?

constructor(props) {
    super(props);
    this.state = {          
        imagesArray: [
            {
                default: '/images/volImage1.png',
                active: 'images/volImage1.png'
            },
            {
                default: '/images/volImage2.png',
                active: 'images/volImage2-Active.png'
            },
            {
                default: '/images/volImage3.png',
                active: 'images/volImage3.png'
            },
            {
                default: '/images/volImage4.png',
                active: 'images/volImage4.png'
            },
            {
                default: '/images/volImage5678.png',
                active: 'images/volImage5678.png'
            },
        ],
        tabData: [
            {
                title: 'Knowledge and experience',
                content: <VolunteerTabContent1 imagesArray={this.state.imagesArray} /> 
                //Here I am passing above imagesArray state, and this is coming as undefined and throwing error
            },
            {
                title: 'Practical and hands on',
                content: 'Tab 2 Content'
            },
            {
                title: 'Management and leadership',
                content: 'Tab 3 Content'
            },
        ]

    }
}

Answer 1

You cannot use this.state when setting the state itself. This won't work at all.

In your case, if imagesArray is not going to be changed during the execution and it's only some data you need, maybe you don't need to set it as part of the component's state.

You could define imagesArray as a constant outside the class or something similar, and just reference it when setting the tabData.

EDIT:

Even more. If tabData is just data you will need afterwards but it's not going to change, you don't need to set that as state either.

EDIT 2: If this two arrays really need to be in the state, a way to achieve the desired results would be to define only the component name in the 'content' property of each tabData item, and then use that to instantiate it in the render method:

tabData: [
  {
   title: 'Knowledge and experience',
   content: VolunteerTabContent1
  }, 
  ...

and then in the render method you can do:

// Let's suppose you want the first one as an example. Do this as you need.
const item = this.state.tabData[0];

render() {
  <item.content imagesArray={this.state.imagesArray} />
}

This way you'll correctly get the imagesArray form the state. JSX will get item.content's value (the VolunteerTabContent1 component in this case) and render it.

Answer 2

I will show in functional component it will useful for someone.


import "./styles.css";
import image1 from '../image/man.png';
import image2 from '../image/woman.png';
import React,{useState} from 'react';`enter code here`
import Avatar from '@mui/material/Avatar';

export default function App() {

  const [choose,setChoose] =useState("")
const [avatar,setAvatar] = useState(image);


  return (
    <div className="App">
       
      <Avatar 
        alt="D S"
        src={avatar}
        sx={{ width: 44, height: 44 }}
      />
     
       <div>
          <Avatar className='Avatars' onClick={()=> setChoose(image1)} alt="Guest"
           src={image1} sx={{ width: 30, height: 30 }}/>
           <label>Guest</label>
           </div>
        <div>
          <Avatar className='Avatars' onClick={()=> setChoose(image2)} alt="Other" 
          src={image2} sx={{ width: 30, height: 30 }}/>
          <label>Other</label>
          </div>
          <div>
          <button className="avatar_btn1" onClick={()=>setAvatar(choose)} >OK</button>
          </div>
    </div>
  );
}


from my code first you can choose a avatar it will not change in frontend when you click ok button it will show avatar changed one.