I'm currently creating a custom React component in Meteor for adding images to a list (and later uploading them). However when I try to delete images from the list, always the last element is removed from the GUI. Initially I thought this was just a simple case of using the wrong index for deletion, but it turned out to be more than that.
This is what my ImageList component currently looks like:
import React from 'react';
import Dropzone from 'react-dropzone';
import cloneDeep from 'lodash.clonedeep';
import { ImageItem } from './image-item.js';
export class ImagesList extends React.Component {
constructor(props) {
super(props);
this.values = this.props.images || [];
this.onDrop = this.onDrop.bind(this);
this.addImages = this.addImages.bind(this);
this.deleteImage = this.deleteImage.bind(this);
this.imageChanged = this.imageChanged.bind(this);
}
onDrop(files) {
this.addImages(files);
}
onDropRejected() {
alert('Invalid file type');
}
addImages(files) {
files.forEach(file => {
this.values.push({
title: '',
description: '',
url: file.preview,
file,
});
});
this.forceUpdate();
}
deleteImage(index) {
console.log('index to delete', index);
console.log('images pre-delete', cloneDeep(this.values)); // deep-copy because logging is async
this.values.splice(index, 1);
console.log('images post-delete', cloneDeep(this.values)); // deep-copy because logging is async
this.forceUpdate();
}
imageChanged(index, image) {
this.values[index] = image;
this.forceUpdate();
}
render() {
console.log('--------RENDER--------');
return (
<div className="image-list">
<div className="list-group">
{this.values.length === 0 ?
<div className="list-group-item">
No images
</div>
:
this.values.map((image, index) => {
console.log('rendering image', image);
return (
<ImageItem
key={index}
image={image}
onDelete={() => { this.deleteImage(index); }}
onChange={(item) => { this.imageChanged(index, item); }}
deletable={true}
/>
);
})
}
</div>
<Dropzone
multiple={true}
onDrop={this.onDrop}
onDropRejected={this.onDropRejected}
className="dropzone"
activeClassName="dropzone-accept"
rejectStyle={this.rejectStyle}
accept={'image/*'}
>
<span>Drop files here</span>
</Dropzone>
</div>
);
}
}
The ImagesList component can be initialized with some values (for the sake of debugging), which it uses during rendering. For example:
<ImagesList images={[
{ title: 'Image 1', description: 'Image 1 description', url: 'http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg' },
{ title: 'Image 2', description: 'Image 2 description', url: 'http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg' },
{ title: 'Image 3', description: 'Image 3 description', url: 'http://cssdeck.com/uploads/media/items/0/00kih8g.jpg' },
]}/>
ImagesList renders an ImageItem component for each image. This is what this component looks like:
import React from 'react';
import { RIEInput, RIETextArea } from 'riek';
export class ImageItem extends React.Component {
constructor(props) {
super(props);
this.placeholder = {
title: 'Title',
description: 'Description',
};
this.value = this.props.image;
}
render() {
return (
<div className="list-group-item">
<div className="text-content">
<h4>
<RIEInput
className="description"
value={this.value.title.length <= 0 ?
this.placeholder.title : this.value.title}
change={(item) => {
this.value.title = item.value;
this.props.onChange(this.value);
}}
validate={(value) => value.length >= 1}
classEditing="form-control"
propName="value"
/>
</h4>
<span>
<RIETextArea
className="description"
value={this.value.description.length <= 0 ?
this.placeholder.description : this.value.description}
change={(item) => {
this.value.description = item.value;
this.props.onChange(this.value);
}}
validate={(value) => value.length >= 1}
classEditing="form-control"
propName="value"
rows="2"
/>
</span>
</div>
<img className="thumb img-responsive"
style={{width: '20%' }}
src={this.value.url}
alt="Image"
data-action="zoom"
/>
{this.props.deletable ?
<div className="delete-btn">
<span onClick={this.props.onDelete}>
×
</span>
</div>
:
undefined }
</div>
);
}
}
Let's say I have three images, image A, B and C, and I want to delete image B. After pressing the delete button, image C will disappear from the GUI instead.
Inside the deleteImage() function of ImagesList, I am logging the index that is to be deleted and also log the values before and after the deletion. The index that is logged is correct, in this case that is index 1. Before the deletion the values are images A, B and C. After deletion the values are images A and C, as they should be.
I decided to do some logging inside the render() function of ImagesList as well. Unfortunately this also logs the correct values A and C, but A and B are actually rendered.
I have also tried to use the React state for this component instead of storing it in a local variable in conjunction with forceUpdate().
Another thing I have tried is to use the React Developer Tools plugin for Chrome. The Devtools also show the correct values, but the GUI still does not, as shown in this screenshot.
I'm currently out of ideas on what to try, any help would be appreciated!
Using the snippets I provided, you should be able to create a Meteor project and reproduce this bug.
With MasterAM's suggestion I managed to find two different solutions.
A.) Using componentWillUpdate()
The this.value variable is set only once namely in the constructor of the ImageItem component. To ensure that changes are properly delegated, you have to update this.value inside the componentWillUpdate() function. Something like:
componentWillUpdate(nextProps, nextState) {
this.value = nextProps.image;
}
B.) Using the property directly
This is definitely the more proper solution. Here we get rid of the local variable this.value inside the constructor of the ImageItem component.
Inside the render() function you replace this.value with this.props.image. Now without having to use the componentWillUpdate() function, everything works as expected.
Related
I have a component called RightTab like this
const RightTab = ({ data }) => {
return (
<div className="RightTab flex__container " onClick={data.onClick}>
<img src={data.icon} alt="Dashboard Icon" />
<p className="p__poppins">{data.name}</p>
{data.dropDown === true ? (
<div className="dropdown__icon">
<img src={Assets.Arrow} alt="Arrow" />
</div>
) : (
<div className="nothing"></div>
)}
</div>
);
};
export default RightTab;
The tab has an active state in its CSS like this
.RightTab.active {
background-color: var(--primaryGreen);
}
as you have seen it changes the color when an active class is added. I have an array in the parent component that I pass down to the child component as props. Here is the array
const dataArray = [
{
name: "Dashboard",
icon: Assets.Dashboard,
dropDown: false,
onClick: handleDashBoardClick,
},
{
name: "Inventory",
icon: Assets.Inventory,
dropDown: true,
onClick: handleInventoryClick,
},
{
name: "Reports",
icon: Assets.Reports,
dropDown: true,
onClick: handleReportsClick,
},
];
Here is how I pass the props down.
<RightTab data={dataArray[0]} />
<RightTab data={dataArray[1]} />
<RightTab data={dataArray[2]} />
The data prop passed into the component is an object containing a function call as one of its properties like this. I have an onclick attribute on the child components' main container that is supposed to call the respective function.
The function is what adds the active class to make the background change color. However each time I click on the component it only changes the background of the first occurrence. And as you may have noticed I call the component thrice. No matter which component I click only the first ones background changes.
Here is an example of the function that is on the prop object.
const handleDashBoardClick = () => {
const element = document.querySelector(".RightTab");
element.classList.toggle("active");
};
I don't get what I'm doing wrong. What other approach can I use?
Although you use the component 3 times, it doesn't mean that a change you make in one of the components will be reflected in the other 2, unless you specifically use a state parameter that is passed to all 3 of them.
Also, the way you add the active class is not recommended since you mix react with pure js to handle the CSS class names.
I would recommend having a single click handler that toggles the active class for all n RightTab components:
const MainComponent = () => {
const [classNames, setClassNames] = useState([]);
const handleClick = (name) =>
{
const toggledActiveClass = classNames.indexOf('active') === -1
? classNames.concat(['active'])
: classNames.filter((className) => className !== 'active');
setClassNames(toggledActiveClass);
switch (name) {
case 'Dashboard';
// do something
break;
case 'Inventory':
// ....
break;
}
}
const dataArray = [
{
name: "Dashboard",
icon: Assets.Dashboard,
dropDown: false,
onClick: handleClick.bind(null, 'Dashboard'),
},
{
name: "Inventory",
icon: Assets.Inventory,
dropDown: true,
onClick: handleClick.bind(null, 'Inventory'),
},
{
name: "Reports",
icon: Assets.Reports,
dropDown: true,
onClick: handleClick.bind(null, 'Reports'),
},
];
return (
<>
{dataArray.map((data) =>
<RightTab key={data.name}
data={data}
classNames={classNames} />)}
</>
);
};
const RightTab = ({ data, classNames }) => {
return (
<div className={classNames.concat(['RightTab flex__container']).join(' ')}
onClick={data.onClick}>
<img src={data.icon} alt="Dashboard Icon" />
<p className="p__poppins">{data.name}</p>
{data.dropDown === true ? (
<div className="dropdown__icon">
<img src={Assets.Arrow} alt="Arrow" />
</div>
) : (
<div className="nothing"></div>
)}
</div>
);
};
What I've tried and my issue
I started with creating an external function and running it through the onClick... this works partly as it sends the alerts on click. See the services page on test.ghostrez.net.
Click the small images to trigger the alerts that show which if statement, thestate.active:value, and the state.id:value.
So I know the correct statements are being triggered.
My problem is I keep having state[i].setState is not a function returned rather than the state being set as intended.
I have placed the function internally and externally to the class Player and it returned the same issue.
I converted the function to an internal arrow function as suggested HERE.
I converted it to a const changeActiveField = () => {stuff in here}
I attempted to bind it const changeActive = changeActiveField.bind(this) *as suggested HERE and HERE
Each attempt returning the same Error
this is what the debug console returns
Here is my current function its process > 1. if the active object in state has the same id as image clicked - do nothing, 2. if the active object has a different id to the image clicked setState active:value to false then come back and find the object with the id === id of the image clicked and setState active:true from false.
function changeActiveField(im, state) {
console.log(state);
for (var i = 0; i < state.length; i++) {
if (state[i].active === true && state[i].id === im) {
return alert("if " + state[i].active + " " + state[i].id);
} else if (state[i].active === true && state[i].id !== im) {
alert(" elseif set false " + state[i].active + " " + state[i].id);
state[i].setState(false);
} else if (state[i].id === im) {
alert("elseif make true " + state[i].active + " " + state[i].id);
state[i].setState({ active: true });
return;
} else {
return alert("Nope");
}
}
}
changeActiveField is called here
<div className="thumbs">
{this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
onClick={() => changeActiveField(i.id, this.state.ids)}
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
<h2>
{i.id} {i.active ? "true" : "false"}
</h2>
</>
))}
</div>
No joke I've been trying to resolve this for 4 days now. I'm stumped.
It appears that you are trying to setState on an individual id, but what you are actually doing is trying to call id.setState
From the code you supplied, each id looks basically like this:
{active: //true/false, id: //some Int}
but in reality your code is looking for this...
{active: //true/false, id: //some Int, setState: () => //do something here}
You'll need to handle how to find your specific id object in that array of ids, and then update your full state with the current state AND the modification you are making.
EDIT://my fault, wasn't thinking.
I would recommend making a copy of your state array in a new variable, then mapping through that new array variable making your mutations. Then set your state based on that new array objects...
let newIdArr = this.state.ids
newIdArr.map(id => //do your stuff here...)
this.setState({...this.state, ids: newIdArr})
Lastly, when you setState(false) you are overwriting ALL your state to where it will be just false, losing all your ids along the way.
This is the end product of too many days pulling my hair out... but it works now and hopefully, it helps someone else. (full component code last)
I used an anonymous function in the Image that is being rendered. This finds and updates the object in the this.state array, first, it finds the ids that don't match the value passed in from the "carouselitem" and updates their active values to false, then it finds the id that matches the value passed in and updates it to true.
The old function changeActiveField is now
onClick={() => {
this.setState((prevState) => ({
ids: prevState.ids.map((ob) =>
ob.id !== i.id
? { ...ob, active: false }
: { ...ob, active: true }
),
}));
}}
I have also moved my firstActiveId into the class. This finds the array object with active: true and returns the id value which is placed in the activevid to display and play the appropriate video.
firstActiveId = () => {
for (var i = 0; i < this.state.ids.length; i++) {
if (this.state.ids[i].active) {
return this.state.ids[i].id;
}
}
};
The firstActiveId is used like this to provide playback.
<div className="activevid">
<Embed
active
autoplay={true}
color="white"
hd={false}
id={this.firstActiveId(this.state.ids)}
iframe={{
allowFullScreen: true,
style: {
padding: 0,
},
}}
placeholder={
"http://img.youtube.com/vi/" +
this.firstActiveId(this.state.ids) +
"/hqdefault.jpg"
}
source="youtube"
/>
</div>
TIP: don't over-complicate things like I do
Full Component
import React, { Component } from "react";
import { Embed, Image } from "semantic-ui-react";
import "./Player.css";
export default class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
ids: [
{
id: "iCBvfW08jlo",
active: false,
},
{
id: "qvOcCQXZVg0",
active: true,
},
{
id: "YXNC3GKmjgk",
active: false,
},
],
};
}
firstActiveId = () => {
for (var i = 0; i < this.state.ids.length; i++) {
if (this.state.ids[i].active) {
return this.state.ids[i].id;
}
}
};
render() {
return (
<div className="carouselwrap">
<div className="activevid">
<Embed
active
autoplay={true}
color="white"
hd={false}
id={this.firstActiveId(this.state.ids)}
iframe={{
allowFullScreen: true,
style: {
padding: 0,
},
}}
placeholder={
"http://img.youtube.com/vi/" +
this.firstActiveId(this.state.ids) +
"/hqdefault.jpg"
}
source="youtube"
/>
</div>
<div className="thumbs">
{this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
onClick={() => {
this.setState((prevState) => ({
ids: prevState.ids.map((ob) =>
ob.id !== i.id
? { ...ob, active: false }
: { ...ob, active: true }
),
}));
}}
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
</>
))}
</div>
</div>
);
}
}
I have a header component where I need to render three buttons, so every three buttons have three props. One is the class name, click handler and text.
So out of three buttons, two buttons act as a toggle button, so based on the click the text should change.
See the below code:
class App extends Component(){
state = {
navigationList: [{
text: 'Signout',
onClickHandler: this.signoutHandler,
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode,
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay,
customClassName: 'buttonStyle'
}]
}
signoutHandler = () => {
// some functionality
}
viewMode = () => {
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay = () => {
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<Header navigationList={this.state.navigationList}/>
)
}
}
const Header = ({navigationList}) => {
return (
<>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</>
)
}
The other way is I can pass all the props one by one and instead of an array I can write three button elements render it, but I am thinking to have an array and render using a map.
So which method is better, the problem that I am facing is if use the array. map render
the approach I need to set the initial value as a variable outside and how can I set the state.
And I am getting the onClick method is undefined, is it because the function is not attached to the state navigation list array.
Update
I declared the functions above the state so it was able to call the function.
So in JS, before the state is declared in the memory the functions should be hoisted isn't.
class App extends React.Component {
constructor(props){
super();
this.state = {
isStudents:false,
activeWay:false,
}
}
createList(){
return [{
text: 'Signout',
onClickHandler: this.signoutHandler.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay.bind(this),
customClassName: 'buttonStyle'
}];
}
signoutHandler(){
}
viewMode(){
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay(){
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<div>
<div>ddd</div>
<Header navigationList={this.createList()} />
</div>
)
}
}
const Header = ({navigationList}) => {
console.log(navigationList);
return (
<div>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</div>
)
}
ReactDOM.render(<App />, document.querySelector("#app"))
https://jsfiddle.net/luk17/en9h1bpr/
Ok I will try to explain, If you see you are using function expressions in your class and as far as hoisting is concerned in JavaScript, functions expressions are not hoisted in JS only function declarations are hoisted, function expressions are treated as variables in JS.
Now for your case you don't have to shift your functions above the state, you can simply use constructor for initializing state as
constructor(props) {
super(props);
this.state = {
isStudents: false,
activeWay: false,
navigationList: [
{
text: "Signout",
onClickHandler: this.signoutHandler,
customClassName: "buttonStyle"
},
{
text: "Teachers",
onClickHandler: this.viewMode,
customClassName: "buttonStyle"
},
{
text: "Active Hidden",
onClickHandler: this.activeWay,
customClassName: "buttonStyle"
}
]
};
}
Now you will have your handlers available as it is
Sandbox with some modification just to show
EDIT:
You can have default text for buttons and change it when clicking,
Sandbox updated
Hope it helps
I have created a modal(benficiary Type) and I am trying to call another modal when I am selecting the Person as Beneficiary Type and clicking on the next in the Beneficiary Type modal but while I am trying to implement it, I am failing at below two points:
1. When I am importing the second modal(personModal) it is showing me the message "personModal is declared but its value is never read. [6133]"although I am using that import also and hence it is not getting navigated.
2. On navigation to the personModal after clicking on next button present in the beneficiary type modal, I want to hide the first modal and show only the second modal,without using the react navigator and react routes.Is there a way to do it?
Please help.
For your reference please find the code below:
Benficiary Type Modal
import React, { Component } from 'react';
import Select from 'gssp-common-ui/lib/components/select/select.component';
import Button from 'gssp-common-ui/lib/components/button/button.component';
import personModal from './personModal.component';
const backdropStyle = {
position: 'fixed',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.3)',
padding: 50
};
const modalStyle = {
backgroundColor: '#fff',
borderRadius: 5,
maxWidth: 500,
minHeight: 300,
margin: '0 auto',
padding: 30,
position: 'relative'
};
class Modal extends Component {
constructor(props) {
super(props);
this.state = {
dropDownValue: '',
showBeneficiaryModel: false
};
}
handleDropDownChange = (event, value) => {
this.setState({ dropDownValue: value });
}
clickHandlernextBtn = (e) => {
if ((e === 'click') && (this.state.dropDownValue === 'Person')) {
return (
<div>
{console.log('Dropdown value is ', this.state.dropDownValue)}
<personModal />
</div>);
}
};
render() {
if (!this.props.show) {
return null;
}
return (
<div style={backdropStyle}>
<div style={modalStyle}>
<h5><b>{'Add Beneficiary'}</b></h5>
<p>{'All fields are required unless otherwise noted.'}</p>
{/* <form onSubmit={this.handleSubmit}>
<select value={this.state.value} onChange={this.handleChange} >
<b><option value="beneficiary type">{'Beneficiary Type'}</option></b>
<option value="person">{'Person'}</option>
<option value="living trust">{'Living Trust'}</option>
<option value="testamentary trust created in the insured’s will">{'Testamentary Trust created in the Insured’s Will'}</option>
<option value="charity/organization">{'Charity/Organization'}</option>
<option value="estate ">{'Estate '}</option>
</select>
<input type="submit" value="Submit" />
</form> */}
<Select
className="dropdown-class"
title={'Beneficiary Type'}
options={[
{
key: 'Person',
value: 'Person'
},
{
key: 'Living Trust',
value: 'Living Trust'
},
{
key: 'Remove ClasTestamentary Trust created in the Insured’s Will',
`enter code here` value: 'Testamentary Trust created in the Insured’s Will'
enter code here },
{
key: 'Charity/Organization',
value: 'Charity/Organization'
},
{
key: 'Estate',
value: 'Estate'
}
]
}
onEvent={(event, value) => this.handleDropDownChange(event, value)}
/>
<Button
value="NEXT"
className="next_btn"
id="SMDEmployer_schedulepayment_next-button"
onEvent={e => this.clickHandlernextBtn(e)}
/>
</div>
</div>
);
}
}
export default Modal;
personModal.component
import React, { Component } from 'react';
class personModal extends Component {
constructor(props) {
super(props);
this.state = {
dropDownValue: ''
};
}
render() {
return (
<div>
{'Hi PersonModal here'}
</div>
);
}
}
export default personModal;
Note: Button is custom component which is working fine.
I had the same problem. Its simple solution is importing the component with custom names starting with a capital letter.
The personModal component used as <personModal /> will be interpreted as HTML tag as it begins with a lowercase. To use the component rename the component to PersonModal or any other name beginning with an uppercase.
In my setup, I just needed to change the file ending to .tsx, instead of .ts. If you're using JavaScript, the equivalent might be changing a .js file to a .jsx file.
Your file name should be start with capital letter and In latest React version, you don't need to import. And if you are getting 'React' must be in scope when using JSXeslintreact/react-in-jsx-scope then off this in your eslint file like:
"react/react-in-jsx-scope": "off",
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'
},
]
}
}
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.
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.