export const ContentContext = React.createContext()
export const arrCart = []
//Есть компонент родитель Content
function Content() {
let [cart, setCart] = useState([])
function addCart(roll) {
arrCart.push(roll)
// console.log(typeof arrCart, arrCart)
}
return (
<ContentContext.Provider value={{cart, setCart, addCart}}>
<div className={styles.content}>
<Goods />
<Cart />
</div>
</ContentContext.Provider>
);
}
//Компонент Goods он выводит товары которые можно добавить в корзину
function Goods() {
const {setCart} = React.useContext(ContentContext)
return (
// Код который выводит товары на страницу
//Кнопка которая должна добавлять в корзину()
<button onClick={()=> { addCart(roll) return setCart(roll)}} className={styles.btn__add} type='button'>Add</button>
//Компонент Cart сюда я должен получать массив
import { arrCart } from '../Content';
function Cart() {
console.log(arrCart)
return ()
}Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей- не в обиду, это ломает мне мозг, и я не в силах это понять, надеюсь кто-то другой подскажет
onClick={()=> { addCart() return setCart(roll)}}addCart синхронная функция что она делает - добавляет в массив cart а cart по дефолту это пустой массив, поэтому сначала добавляется пустотаimport { arrCart } from '../Content'; // за место импорта - пользуйся контекстом , если твой компонент Cart находится внутри контекста
function Cart() {
console.log(arrCart)
return ()
}span class="text-wrap" style="max-width:200px; display: block;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span><div class="col">
<div class="w-100">
<span class="text-wrap" style="max-width: 200px;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span>
</div>
</div>width: fit-content;
Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине?