score:0
Accepted answer
how can i apply the color based on the based string? let say this.props.company name is the base string,right? if its so then you can do something like this
style={{ backgroundcolor: backgroundmapping[this.props.company], color: colormapping[this.props.company] }}
but,wait
is this the right approach, could i just use 1 mapping object? no,then why?what if there is no color for given this.props.company? so you code may need to check first that for given company name mapping found,and of course you should use single mapping instead of two, then how? consider the steps create a theme object like this
const theme={
facebook:{color:"while",background:"blue"},
defaulttheme:{
color:"while",background:"black"
}
}
and then you can assign this theme to your component as following
<div style={theme[this.props.company]||theme.default}>
{props.company} //facebook
</div>
Source: stackoverflow.com
Related Query
- Use object to map color to component React
- Is it ok to convert Immutable.js Map to Object inside of react component
- Render react Component from Map Object
- How to use ES6 map function in React stateless component
- How react functional component can use object variable which declared behind the usage? (include example)
- Use custom object inside react component
- How to use a state value with map function to display repeat ui in react component
- Problem with use of map function in react for setting text and color of buttons
- object.key for using object as array on map not allwoing to pass argument as props to React component
- React GraphQL - How to return the results of a Query component as an object to use in React context
- Use leaflet map object outside useEffect in react
- How to map over an object which has a unique id for each object values and return the values to a React component
- Use object included from global <script> tag inside React component
- How to use custom font special symbols in object properties used in React Component
- React Hooks: How can I use a hook to map an array from a dumb component
- How to use nested Map in React component with the given data
- Unable to Iterate Typescript Map object using .map() in React Component
- How to map through a json object that is stored in a react component not coming from an api?
- Use map function for array object and display in table in React
- Convert object to array with Lodash _.map and use map function in React
- How to pass an array as props in React component and use map on it?
- How to use array object when import web component to react app
- I want to map my array from an object using react and next.js, it's a function component using hooks
- How to use axios from react front end to get object from nodejs on component load (useEffect)
- How to use the Color we set in createMuiTheme Function of App.js file in child component in react
- How to use children with React Stateless Functional Component in TypeScript?
- How to use an array as option for react select component
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- React Native - how to use local SVG file (and color it)
- Unable to use Arrow functions inside React component class
More Query from same tag
- Ant Design - How to restrict clickable area of table headers when sorting
- Axios instance not getting the token from the Local storage on the first attempt || React JS
- How can I use an empty array declared on React's initial state?
- React is slow when rendering many elements
- Routing in React Js
- ReactJs feedback with SVG Emojis
- Using React Context and now my navbar is gone?
- Cannot list keys within object
- React bind custom handler onChange to input
- Join multiple array maps in ReactJs
- How to pass a variable in form action url?
- react passing data from parent to child component
- Manipulating an array without overriding elements
- Why is my game not failing if the same card is clicked twice?
- React Hooks seacrh input keypress enter redirect result page
- Strange behavior in react/redux
- Redux how to set initial state
- React-intl multi language app: changing languages and translations storage
- React - Correct way of passing a reference to a react-portal
- GraphQL defaulting data causes infinite loops in useEffect
- How does a complete check function work in ReactJs?
- What is wrong with this useReducer react code?
- React: Load objects with a REST call and prepend new from WebSocket events
- Array.find function in REACT JS Cannot read property of undefined
- React - Error when class components reference function components
- React, dynamically change part of a route
- How to access parent ref from child
- My React function gets called twice, with the second call setting values incorrectly
- Looping an array to list items
- Add dynamic tailwind class to a react component (Next.JS + Tailwind + TS)