Немного предыстории о моем проекте - я пытаюсь взять некоторую информацию из цветового API, который я нашел в Интернете, и создать с ним приложение цвета дня.По сути, он использует React для получения шестнадцатеричного значения из API, а затем я хочу установить цвет фона моей веб-страницы на этот шестнадцатеричный цвет.Единственная проблема заключается в том, что шестнадцатеричное значение, которое я получаю из API, не имеет перед собой «#».Поскольку я новичок в Javascript и React, я пытаюсь взять шестнадцатеричный код, данный мне из API, добавить «#» в его начало, а затем установить это значение в качестве цвета фона.Я просто не очень уверен в синтаксисе, так как я довольно новичок в JS.Это не слишком много кода, и я также добавлю ссылку на API, который я использую.Буду признателен за любую помощь!
import React, { Component } from "react";
import "./App.css";
class App extends Component {
constructor() {
super();
this.state = {
items: [],
isLoaded: true
};
}
componentDidMount() {
fetch("http://www.colr.org/json/colors/random/7")
.then(res => res.json())
.then(res => {
this.setState({
isLoaded: true,
items: res.colors
});
});
}
render() {
var { items, isLoaded } = this.state;
var itemName = items.map(item => (
<div key={item.id}>{item.tags[0].name}</div>
));
var itemHex = items.map(item => <div key={item.id}>{item.hex}</div>);
if (!isLoaded) {
return (
<div>
<h1>Not Loaded!</h1>
</div>
);
} else {
return (
<section style={{ backgroundColor: { itemHex } }} className="App">
<h1>today's color of the day is: {itemName}</h1>
<h2>Hex:{itemHex}</h2>
</section>
);
}
}
}
export default App;
API, который я использую: http://www.colr.org/json/colors/random/7
По сути, я не слишком уверен в том, как 1.) добавить '#'переменная' itemHex 'и 2.) правильно отформатируйте переменную' style 'в моем <section>.Если бы я мог получить помощь с обоими этими вещами, это было бы здорово!Спасибо!