I built a currency converter and want to display next to currency abbreviation the flag also! I fetch the currency rates from API but cannot find how can I display the flags next to them! I tried to create a script.js file including the flags but didn't work! I guess is quite easy however I have spent a lot of time to find a way!
Converter Application Image
Code for Converter component:
constructor(props) {
super(props)
this.state = {
currencyInput: 'USD',
currencyOutput: 'EUR',
amountInput: 0,
amountOutput: 0,
options: []
}
}
handleChange = event => {
const target = event.target
const value = target.value
const name = target.name
this.setState({ [name]: value })
}
handleSubmit = event => {
event.preventDefault () //Preventing form from submitting
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=my-token`)
.then(res => res.json())
.then(data => {
const rateFromEuroToInput = data.rates[this.state.currencyInput]
const inputInEuros = this.state.amountInput / rateFromEuroToInput
const rateFromEuroToOutput = data.rates[this.state.currencyOutput]
const eurosInOutput = inputInEuros * rateFromEuroToOutput
this.setState({ amountOutput: eurosInOutput })
})
}
componentDidMount() {
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=API KEY`)
.then(res => res.json())
.then(data => {
const currencyOptions = Object.keys(data.rates)
this.setState({ options: currencyOptions })
})
}
render() {
return (
<>
<div className="card card-body p-3 mb-3 bg-light text-dark">
<h1 className="mb-4">Currency Converter</h1>
<form onSubmit={this.handleSubmit}>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6 offset-1">
<div className="form-group col-md-8">
<div className="mb-2">
<label><strong>Currency I Have</strong></label>
</div>
<select className="form-select"
type="text"
name='currencyInput'
value={this.state.currencyInput}
onChange={this.handleChange}
>
{this.state.options.map(option => {
return <option value={option}>{option}</option>
})
}
</select>
</div>
<div className="form-group col-md-8 mt-4">
<div className="mb-2">
<label><strong>Amount</strong></label>
</div>
<input className="form-control"
name="amountInput"
type="number"
value={this.state.amountInput}
onChange={this.handleChange}
/>
</div>
</div>
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<div className="mb-2">
<label><strong>Currency I Want</strong></label>
</div>
<select className="form-select"
type="text"
name='currencyOutput'
value={this.state.currencyOutput}
onChange={this.handleChange}
>
{this.state.options.map(option => {
return <option value={option}>{option}</option>
})
}
</select>
</div>
<div className="form-group col-md-8 mt-4">
<div className="mb-2">
<label><strong>Amount</strong></label>
</div>
<input className="form-control"
name="amountOutput"
type="number"
value={this.state.amountOutput}
onChange={this.handleChange}
/>
</div>
</div>
</div>
<br/>
<button type="submit" className="btn btn-primary mb-2">Convert</button>
</form>
</div>
</>
)
}
}
export default Converter```
I would like to give any suggestion how to implement the flags with in the currency rows!
Thank you!
you can fix this by downloading all the currencies images that you will use, and after that create an object which bind key: symbol; value: 'path-to-image'
Please refer to this on how to display icon inside input
And Refer to this on how to include images in React
As far as I am looking at this, concrete solution might be like this
// * Download all currency flags that you will use and add them to public directory
const mapSymbolToFlag = {
'ALL': 'path-to-public-directory/all.ico',
'EUR': 'path-to-public-directory/eur.ico'
}
// * so on and so forth
Create an input component to hide all the details on how to put image/icon on input and the mapping, and include this input component that you will create on the main currency component with symbol as input/prop
I have a few points I want to highlight:
A way to solve this is creating a dictionary where you can define a flag using the currency.
Creating a component where you send the currency can be a good practice to implement the dictionary
There are currencies where many countries use them, so in this case you need to define a flag or adapt your component to show the flags where the currency applies.
In your example you are overriding the state and deleting the information of your initial state, you need to add setState({...state, }) and after that, new things.
Here are my code snippets where you need to modify:
...
handleChange (event) {
const target = event.target;
const value = target.value;
const name = target.name;
// add `...state` to avoid remove all your previous information
setState({ ...state, [name]: value });
};
...
...
handleSubmit(event) {
event.preventDefault(); //Preventing form from submitting
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=my-token`)
.then(res => res.json())
.then(data => {
const rateFromEuroToInput = data.rates[state.currencyInput]
const inputInEuros = state.amountInput / rateFromEuroToInput
const rateFromEuroToOutput = data.rates[state.currencyOutput]
const eurosInOutput = inputInEuros * rateFromEuroToOutput
// add ...state to avoid remove all your previous information
setState({ ...state, amountOutput: eurosInOutput })
})
};
...
...
render() {
<>
<div className="card card-body p-3 mb-3 bg-light text-dark">
<h1 className="mb-4">Currency Converter</h1>
<form onSubmit={handleSubmit}>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6 offset-1">
<div className="form-group col-md-8">
<div className="mb-2">
<label>
<strong>Currency I Have</strong>
</label>
</div>
<select
className="form-select"
type="text"
name="currencyInput"
value={state.currencyInput}
onChange={handleChange}
>
{state.options.map((option) => {
return <option value={option}>{option}</option>;
})}
</select>
{/* HERE GOES YOUR NEW COMPONENT */}
<Flags currency={state.currencyInput} />
</div>
...
}
I found an image API where you can define a flag using its country code
Country flags
Using that I made this component
import React from 'react';
import flagsData from '../../mocks/flags.json';
const FLAG_URL = 'https://www.countryflags.io';
const { flagsFromCurrency, styles, sizes } = flagsData;
const Flags = ({ currency, style = styles.FLAT, size = sizes['16'] }) => {
return (
<img
src={`${FLAG_URL}/${flagsFromCurrency[currency]}/${style}/${size}.png`}
alt={flagsFromCurrency[currency]}
/>
);
};
export default Flags;
This is the result:
And you can take a look at the code I made here
I hope this works for you.
Update: I implemented bootstrap styles.
Related
I have been trying to display the form data submitted but the map is throwing an error.
I have two components
NameForm.js
Here is the form input, handlechange and handlesubmit methods are done
function Nameform() {
const [form, setForm] = useState({firstname: "", lastname: ""});
const handleChange = (e) => {
setForm({
...form,
[e.target.id]: (e.target.value),
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log("hello from handle submit", form );
}
return (
<section>
<div className='card pa-30'>
<form onSubmit={ handleSubmit }>
<div className='layout-column mb-15'>
<label htmlFor='name' className='mb-3'>First Name</label>
<input
type='text'
id='firstname'
placeholder='Enter Your First Name'
data-testid='nameInput'
value={form.firstname}
onChange={handleChange}
/>
</div>
<div className='layout-column mb-15'>
<label htmlFor='name' className='mb-3'>First Name</label>
<input
type='text'
id='firstname'
placeholder='Enter Your First Name'
data-testid='nameInput'
value={form.firstname}
onChange={handleChange}
/>
</div>
<div className='layout-row justify-content-end'>
<button
type='submit'
className='mx-0'
data-testid='addButton'
>
Add Name
</button>
</div>
</form>
</div>
</section>
)
}
export default Nameform
NameList.js
I want to pass the data in handleSubmit in NameForm.js to NameList.js. But the data is not displayed.
function NameList({form}) {
return (
<section>
{form.map(displayName => {
return (
<ul
className='styled w-100 pl-0'
>
<li
className='flex slide-up-fade-in justify-content-between'
>
<div className='layout-column w-40'>
<h3 className='my-3'>{displayName.firstname}</h3>
<p className='my-0'{displayName.lastname}></p>
</div>
</li>
</ul>
)
})}
</section>
)
}
export default NameList;
App.js
In App.js, I want to display both the form and the data.
import { Nameform, Namelist } from './components'
function App() {
return (
<div>
<div className='layout-row justify-content-center mt-100'>
<div className='w-30 mr-75'>
<Nameform />
</div>
<div className='layout-column w-30'>
<NameList />
</div>
</div>
</div>
)
}
export default App;
Thank you for your help!
Pass the data you want to share between parent and children via props (which stands for properties).
In the parent class, when rendering <NameForm> and <ListForm> add the data like that:
//if you want to share count and name for example:
<NameForm
count={this.state.count}
name={this.state.name}
/>
You can add as many props as you want. Furthermore, you can pass a function and its argument using arrow functions:
<NameForm
aFunction={() => this.myFunction( /* anArgument */ )}
/>
To access props in a child class dynamically wherever you need them:
{this.props.count}
{this.props.name}
{this.props.aFucntion}
You can get rid of this.props using a technique called object destructing:
render(
const {count, name, aFunction} = this.props;
//now you can use {count} and {name} and {aFunction} without this.props
);
There are some bugs in your code, first form is an object not an array, so you can't map it, you need to use form.firstname and form.lastname, Also you set both input ids equal firstname you need to modify it, Also you need to move the form state and handleChange function to the App component.
This is a working code of your example.
https://codesandbox.io/s/upbeat-forest-328bon
You can save the state in the parent component and pass it as props to the child components like so.
Here we make use of an outer state called submittedForm to display only the submitted values. The inner form state is being used for handling the values before submitting.
// App.js
function App() {
const [submittedForm, setSubmittedForm] = useState({
firstname: "",
lastname: "",
});
return (
<div>
<div className="layout-row justify-content-center mt-100">
<div className="w-30 mr-75">
<NameForm setSubmittedForm={setSubmittedForm} />
</div>
<div className="layout-column w-30">
<NameList form={submittedForm} />
</div>
</div>
</div>
);
}
export default App;
// NameForm.js
function NameForm({ setSubmittedForm }) {
const [form, setForm] = useState({
firstname: "",
lastname: "",
});
const handleChange = (e) => {
// setActive(true);
setForm({
...form,
[e.target.id]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
setSubmittedForm(form);
};
return (
<section>
<div className="card pa-30">
<form onSubmit={handleSubmit}>
<div className="layout-column mb-15">
<label htmlFor="name" className="mb-3">
First Name
</label>
<input
type="text"
id="firstname"
placeholder="Enter Your First Name"
data-testid="nameInput"
value={form.firstname}
onChange={handleChange}
/>
</div>
<div className="layout-column mb-15">
<label htmlFor="name" className="mb-3">
Last Name
</label>
<input
type="text"
id="lastname"
placeholder="Enter Your Last Name"
data-testid="nameInput"
value={form.lastname}
onChange={handleChange}
/>
</div>
<div className="layout-row justify-content-end">
<button type="submit" className="mx-0" data-testid="addButton">
Add Name
</button>
</div>
</form>
</div>
</section>
);
}
export default NameForm;
// NameList.js
function NameList({ form }) {
return (
<section>
<ul className="styled w-100 pl-0">
<li className="flex slide-up-fade-in justify-content-between">
<div className="layout-column w-40">
<h3 className="my-3">{form.firstname}</h3>
<p className="my-0">{form.lastname}</p>
</div>
</li>
</ul>
</section>
);
}
export default NameList;
I have a form I am using to allow users to add comments to my site. The form has an input field, a textarea field, and a button. When the button is clicked it runs my addComment() function which adds the name, comment, and timestamp to my firestore collection as a new doc.
It seems like after I click the button to add a comment I have to wait a few seconds before I can post another one. If I try to add a new comment too quickly then request doesn't get sent to my firestore collection, but if I wait a few seconds everything works as expected.
I am curious if this is normal behavior? How can I set it up so users can always post comments without having to wait a few seconds? Can someone explain to me what is happening?
Thanks
Update:
I have been doing some debugging, and I have noticed that both of the functions getVisitorCount() and getUserComments() from the first useEffect run every time I type something into the name or comment input boxes. I have attached screenshots to showcase what is happening.
On the first initial load of the app:
After typing something in the name input box:
Finally, typing something into the comment box as well:
This is not the desired behavior I want these two functions should not be running when I am typing something into either text field. The getUserComments function should only run on the initial render of the app, and whenever the add comment button is clicked.
Could this be what is causing the problems I am experiencing?
import React, { useState, useEffect } from "react";
import { NavBar, Footer, Home, About } from "./imports";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { db } from "./firebase-config";
import {
collection,
getDocs,
doc,
updateDoc,
addDoc,
Timestamp,
} from "firebase/firestore";
export default function App() {
const [formData, setFormdata] = useState([]);
const [numberOfVisitors, setnumberOfVistors] = useState([]);
const [userComments, setUserComments] = useState([]);
const portfolioStatsRef = collection(db, "portfolio-stats");
const userCommentsRef = collection(db, "user-comments");
const currentNumberOfVisitors = numberOfVisitors.map((visitors) => {
return (
<h2 className="p-3 mb-0 bg-dark bg-gradient text-white" key={visitors.id}>
Number of vistors: {visitors.visitor_count}
</h2>
);
});
const listOfUserComments = userComments.map((comment) => {
return (
<li className="list-group-item" key={comment.id}>
<div className="d-flex w-100 justify-content-center">
<h5 className="mb-1">{comment.name}</h5>
<small>{comment.date.toDate().toString()}</small>
</div>
<p className="d-flex justify-content-center mb-1">{comment.comment}</p>
</li>
);
});
useEffect(() => {
const getVisitorCount = async () => {
const dataFromPortfolioStatsCollection = await getDocs(portfolioStatsRef);
setnumberOfVistors(
dataFromPortfolioStatsCollection.docs.map((doc) => {
return { ...doc.data(), id: doc.id };
})
);
};
const getUserComments = async () => {
const dataFromUserCommentsCollection = await getDocs(userCommentsRef);
setUserComments(
dataFromUserCommentsCollection.docs.map((doc) => {
return { ...doc.data(), id: doc.id };
})
);
};
getVisitorCount();
getUserComments();
}, [numberOfVisitors, portfolioStatsRef, userCommentsRef]);
useEffect(() => {
const updateVisitorCount = async () => {
const portfolioStatsDoc = doc(
db,
"portfolio-stats",
numberOfVisitors[0].id
);
const updatedFields = {
visitor_count: numberOfVisitors[0].visitor_count + 1,
};
await updateDoc(portfolioStatsDoc, updatedFields);
};
if (!numberOfVisitors.length) return;
let sessionKey = sessionStorage.getItem("sessionKey");
if (sessionKey === null) {
sessionStorage.setItem("sessionKey", "randomString");
updateVisitorCount();
}
}, [numberOfVisitors]);
const handleFormData = (event) => {
setFormdata((prevFormData) => {
return {
...prevFormData,
[event.target.name]: event.target.value,
};
});
};
const addComment = async () => {
const newComment = {
name: formData.name,
comment: formData.comment,
date: Timestamp.now(),
};
await addDoc(userCommentsRef, newComment);
};
return (
<>
<div className="d-flex flex-column overflow-hidden min-vh-100 vh-100">
<NavBar />
<div className="row">
<div className="col text-center">
{numberOfVisitors.length === 0 && (
<h2 className="p-3 mb-0 bg-dark bg-gradient text-danger">
Sorry, the Firestore free tier quota has been met for today.
Please come back tomorrow to see portfilio stats.
</h2>
)}
{currentNumberOfVisitors}
</div>
</div>
<div className="bg-image">
<div className="postion-relative">
<main className="flex-grow-1">
<div className="container-fluid p-0">
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<div className="row">
<div className="center-items col">
<h4 className="">Comments</h4>
</div>
</div>
<div className="row">
<div className="center-items col">
<div className="comments-container">
{userComments.length === 0 && (
<h4 className="text-danger bg-dark m-1 p-1">
Sorry, the Firestore free tier quota has been met
for today. Please come back tomorrow to see
portfilio comments.
</h4>
)}
{listOfUserComments}
</div>
</div>
</div>
<div className="row">
<div className="center-items col">
<h4 className="text-dark">Leave a comment</h4>
</div>
</div>
<div className="row">
<div className="center-items col">
<form className="comment-form">
<div className="form-floating mb-3">
<input
type="text"
className="bg-transparent form-control"
id="floatingInput"
name="name"
onChange={handleFormData}
/>
<label htmlFor="floatingInput">Name</label>
</div>
<div className="form-floating">
<textarea
className="form-textarea-field bg-transparent form-control mb-1"
name="comment"
id="floatingTextarea"
onChange={handleFormData}
/>
<label htmlFor="floatingTextarea">Comment</label>
</div>
<div className="d-grid">
<button
className="btn btn-primary mb-4"
onClick={() => addComment()}
>
Add Comment
</button>
</div>
</form>
</div>
</div>
</Router>
</div>
</main>
</div>
</div>
<Footer />
</div>
</>
);
}
I have built a form with 2 inputs and I can get the input value using react-hook-form package but then i cannot update the state value with input value which i need to put inside an image src url end-point so that every time i submit the form i can get image width & height value and generate a random image. by the way i am using Lorem Picsum auto image generator but it's not working or i might be doing it wrong way and also getting error!..let me understand what's going on...Thank you very much.. :-)
// Here's the full code - no props coming from any other components
import React, { useState } from "react";
import { useForm } from "react-hook-form";
const ImageGenerator = () => {
const { register, handleSubmit } = useForm();
const [firstInput, setFirstInput] = useState([]);
const [secondInput, setSecondInput] = useState([]);
const handleInput = (value) => {
let firstValue = value.firstInput;
let secondValue = value.secondInput;
setFirstInput({ firstInput: firstValue });
setSecondInput({ secondInput: secondValue });
};
return (
<React.Fragment>
<form onSubmit={handleSubmit(handleInput)}>
<div className="form-row">
<div className="col-5 mt-4">
<label htmlFor="firstInput" className="font-weight-500">
Set Width
</label>
<input
type="number"
name="firstInput"
className="form-control"
id="firstInput"
ref={register}
/>
</div>
<div className="col-5 mt-4">
<label htmlFor="secondInput" className="font-weight-500">
Set Height
</label>
<input
type="number"
name="secondInput"
className="form-control"
id="secondInput"
ref={register}
/>
</div>
<div className="col-2 mt-5">
<button
type="submit"
className="btn btn-primary"
style={{ marginTop: "7px" }}
>
Generate
</button>
</div>
</div>
</form>
<div className="row">
<img
src={`https://picsum.photos/${firstInput}/${secondInput}`}
alt=""
/>
</div>
</React.Fragment>
);
};
export default ImageGenerator;
why did you use array in useState()?
const [firstInput, setFirstInput] = useState([]);
const [secondInput, setSecondInput] = useState([]);
Not able to edit the text, here is the main component
render() {
return (
<div className="container mb-5">
<RenderProfessionalLearningTable {...this.props} />
</div>
);
}
function RenderProfessionalLearningTable(props) {
return (
<form className="container" onSubmit={props.professionalLearningFormsubmit}>
<div className="form-row">
<div className="form-group col-sm-6">
<label>Course Name *</label>
<input type="text" className="form-control" name="courseName" value={props.professionalLearning.courseName || ''} onChange={props.updateprofessionalLearningValue}
aria-describedby="Course Name" placeholder="Enter a course name" />
</div>
<div className="form-group col-sm-6">
<label>Provider *</label>
<input type="text" className="form-control" name="provider" value={props.professionalLearning.provider || ''} onChange={props.updateprofessionalLearningValue}
id="provider" aria-describedby="Provider" placeholder="Enter a Provider" />
</div>
</div >
</form >
);
}
Here is the action creator
export const actionCreators = {
updateprofessionalLearningValue: professionalLearningItem => async (dispatch, getState) => {
let professionalLearning = getState().professionalLearning.professionalLearning;
professionalLearning[professionalLearningItem.target.name] = professionalLearningItem.target.value;
dispatch({ type: ReduxConstants.recieveProfessionalLearningUpdatecValue, professionalLearning });
}
}
Reducer
case ReduxConstants.receiveFilterProfessionalLearningId:
return {
...state,
professionalLearning: action.professionalLearning,
isLoading: false
};
As per the screen shot I am able to see the changed value, but the UI doesn't reflect it and it doesn't allow me to add more than 1 character. If I press backspace also it doesn't allow me to remove the value.
Some of the reference I followed
Can't type in React input text field
https://github.com/facebook/react/issues/8053
The issue was with the below code
case ReduxConstants.receiveFilterProfessionalLearningId:
return {
...state,
professionalLearning: action.professionalLearning, --> change this code
isLoading: false
}
New code changed to Object.assign({},action.professionalLearning)
case ReduxConstants.recieveProfessionalLearningUpdatecValue:
return {
...state,
professionalLearning: Object.assign({},action.professionalLearning),
isLoading: false
};
I'm a bit new to React and I've been having some problems understanding the workarounds of certain methods that I've used in other languages.
The Problem:
What I was hoping to achieve is that whenever the user clicks a button, the app will render a new section displaying some variable values. What I did was that when the user clicked a button, an state changed, and let the new Component render, and I passed the data through its props.
The problem is, If I understand correctly, that I'm passing the old values when I create the component and not the actual/updated values that I want to render...
Let's say I have this following variables.
const user_data = {
pic_url: 'null',
followers: 'Loading...',
followings: 'Loading...',
nTweets: 'Loading...',
};
Those variables are going to change value whenever the user click a button.
This next block of code is what I use to render the next component where I want the new values.
const SomeComponent = props => {
const [resolved, setResolved] = useState({ display: false });
const displayValidation = props => {
setResolved({ ...resolved, display: !resolved.display });
};
function getData(username) {
const url = 'https://www.twitter.com/' + username;
getHTML(url)
.then(res => {
getUserData(res).then(res => {
user_data.followers = res.followers;
user_data.followings = res.followings;
user_data.nTweets = res.nTweets;
user_data.pic_url = res.pic_url;
console.log('Updated data:', user_data);
displayValidation();
});
})
.catch(function(error) {
console.error('Username was not found.');
});
}
const handleSubmit = event => {
event.preventDefault();
console.log('Resolving data...');
getData(user.username);
};
return (
<React.Fragment>
<Navbar />
<div className="container lg-padding">
<div className="row" id="getTracker">
<div className="col-sm-12 center">
<div className="card text-center hoverable">
<div className="card-body">
<div className="input-field">
<i className="material-icons prefix">account_circle</i>
<input
id="username"
type="text"
className="validate"
value={user.username}
onChange={handleChange}
/>
<label htmlFor="username">Enter a username to track</label>
</div>
<input
type="button"
onClick={handleSubmit}
value="Track"
className="btn-large blue darken-4 waves-effect waves-light"
/>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-sm-12">
**{resolved.display && <DisplayData type={1} data={user_data} />}**
</div>
</div>
</div>
<Footer />
</React.Fragment>
);
};
I want to see the new values, but it always render the first values that I passed when creating the component.
This is the component that I create
import React from 'react';
const DisplayData = props => {
const user = props.data;
console.log('Display', user);
switch (props.type) {
case 1: //Twitter
return (
<React.Fragment>
<div className="row lg-padding">
<div className="col-sm-12 lg-padding center">
<img
src={user.pic_url}
alt="profile_picture"
style={{ width: 50 + '%' }}
/>
</div>
<h2>{user.username}</h2>
</div>
<div className="row lg-padding">
<div className="col-sm-4">
<h4>Tweets: {user.nTweets}</h4>
</div>
<div className="col-sm-4">
<h4>Followers: {user.followers}</h4>
</div>
<div className="col-sm-4">
<h4>Followings: {user.followings}</h4>
</div>
</div>
</React.Fragment>
);
case 2: //Instagram
return <React.Fragment />;
default:
return (
<React.Fragment>
<div className="row lg-padding">
<div className="col-sm-12 lg-padding center">
<img
src={user.pic_url}
alt="profile_picture"
style={{ width: 50 + '%' }}
/>
<h2>Instagram_User</h2>
<h4>Posts: ND</h4>
<h4>Followers: ND</h4>
<h4>Followings: ND</h4>
</div>
</div>
</React.Fragment>
);
}
};
export default DisplayData;
How can I update the data in the component or render the component when the data is updated?
Maybe your user_data might to be a state object.
// Somecomponent ...
const [user_data, setUser_data] = useState({
pic_url: 'null',
followers: 'Loading...',
followings: 'Loading...',
nTweets: 'Loading...'
})
/* Rest of stuff */
const handleSubmit = async event => {
/*...*/
const userData = await getData(user.username)
setUser_data(userData)
}
// Then display the stated-stored user_data
<div className="col-sm-12">
**{resolved.display && <DisplayData type={1} data={user_data} />}**
</div>