modal box xxxxx

سلام

بنده اومدم بک modal box انتخاب کردم حالا می‌خواهم اون را با react انجام بدهم در این modal box یک دکمه درنظر گرفته شده است مثلا برای لاگین بله طبق فیلم جلو رفتم بدون مشکل انجام شد حالا گفتم یک دکمه register هم اضافه کنم و .....

کد‌های ام

import React, { Component } from 'react'
import Button from './Button'
import Box from './Box';
export default class Modal extends Component {
    constructor(props){
        super(props);
        this.state={
            buttons:[
            {id:1, title:'login'},
            {id:2, title:'register'}],
            activeButton:[1,2]
        }
    }
    render() {
        return (
            <>
        )
    }
}

,

import React from 'react'
export default function Button(props) {
    console.log(props);
    const button=props.buttons.map(button=>{
        return  {button.title}
    })
  return (
    {button}
  )
}

خب این جا که می‌خواهم از map استفاده کنم به این ارور بر می‌خورم

Uncaught Error: Objects are not valid as a React child (found: object with keys {button}). If you meant to render a collection of children, use an array instead.
    React 15
    js index.js:5
    factory react refresh:6
    Webpack 3

سلام

بنده اومدم بک modal box انتخاب کردم حالا می‌خواهم اون را با react انجام بدهم در این modal box یک دکمه درنظر گرفته شده است مثلا برای لاگین بله طبق فیلم جلو رفتم بدون مشکل انجام شد حالا گفتم یک دکمه register هم اضافه کنم و .....

کد‌های ام

import React, { Component } from 'react'
import Button from './Button'
import Box from './Box';
export default class Modal extends Component {
    constructor(props){
        super(props);
        this.state={
            buttons:[
            {id:1, title:'login'},
            {id:2, title:'register'}],
            activeButton:[1,2]
        }
    }
    render() {
        return (
            <>
        )
    }
}

,

import React from 'react'
export default function Button(props) {
    console.log(props);
    const button=props.buttons.map(button=>{
        return  {button.title}
    })
  return (
    {button}
  )
}

خب این جا که می‌خواهم از map استفاده کنم به این ارور بر می‌خورم

Uncaught Error: Objects are not valid as a React child (found: object with keys {button}). If you meant to render a collection of children, use an array instead.
    React 15
    js index.js:5
    factory react refresh:6
    Webpack 3

mohammad dadkhah ۱۶ اردیبهشت ۱۴۰۱، ۰۹:۴۸

هر کاری انجام می‌دهم که فایل زیپ را پیوست کنم انجام نمی‌شود حجم زیپ 4 کیلو بایت است

mohammad dadkhah ۱۶ اردیبهشت ۱۴۰۱، ۰۹:۵۱

mohammad dadkhah ۱۶ اردیبهشت ۱۴۰۱، ۱۰:۲۵

سلام

با توجه به عکس هایی که فرستادید چیزی که برداشت کردم مشکل از این هست که اون کامپوننت wrapper نداره یا شفاف‌تر بگم ۲ تا button دارید که والد ندارند و این با اضافه کردن اون مشکل حل میشه که اگر نخوای از تگی مثل div استفاده بکنی میتونی از fragment یا کوتاه شده اون استفاده بکنی (...<>)

 function App() {
  const btns = [
    { id: 1, title: "login" },
    { id: 2, title: "register" }
  ];
  const buttons = btns.map((item) => {
    return {item.title};
  });
  return <>{buttons}>;
}

مجتبی سوری ۱۶ اردیبهشت ۱۴۰۱، ۱۲:۲۷

سلام

میشه لطفا یک مقدار در مورد این key یکم بیشتر توضیح بدید

مثلا در این کدی که شما گذاشتی اومدی از

item

استفاده کردید یعنی این بخش

(item) => {

یک سوال ام این که نام گذاری این key که مثلا شما این جا item گذاشتید اختیاری است؟ و دوم این که حالا چرا داخل پرانتز گذاشتید؟

چون در فیلم‌ها از پرانتز استفاده نمیشه؟

mohammad dadkhah ۱۷ اردیبهشت ۱۴۰۱، ۱۳:۲۶

و این که الان شما در کد تگ button استفاده نکرده اید و صرفا اومدید از

 return {item.title};

title استفاده کردید

حالا من به این دکمه‌ها یک attribute id می‌خواهم بدم که با یک event click مشخص کنم که کدوم شون نمایش داده بشه و با کلیک دوم محو بشود

با این تعاریف من چه طور id به tag button اضافه کنم؟

mohammad dadkhah ۱۷ اردیبهشت ۱۴۰۱، ۱۳:۳۲

در مورد اون استفاده از پرانتز یا نکردن اون تفاوتی در اینجا نداره و این جزئی از سینتکس زبان JS محسوب میشهو در اینجا چون که تابع ما یک پارامتر ورودی داره و به صورت arrow function نوشته شده پرانتز اختیاری محسوب میشه

در مورد اینکه چرا item اسم گذاری شده اون هم اختیاری هست و هر چیزی که بخوای میتونی اسم گذاری بکنی ولی خوب هر چقدر با معنا‌تر باشه بهتر

مورد بعدی هم اینکه چرا از button استفاده نکردم به خاطر الگو برداری از کدهای خودت بود! در عملی خیلی بعید به صورت مستقیم به این صورت بنویسیم. با توجه به نیازی که داری هر تگی رو که لازم داری اضافه بکن

مجتبی سوری ۱۸ اردیبهشت ۱۴۰۱، ۰۵:۴۰

سلام متاسفانه کد آپلود نمی‌شود عکس قرار می‌دهم

و

و

و

mohammad dadkhah ۱۸ اردیبهشت ۱۴۰۱، ۱۸:۰۱

mohammad dadkhah ۱۸ اردیبهشت ۱۴۰۱، ۱۸:۰۲

داخل کامپوننت Button هدفت این که یک button رندر بکنی؟!

اگر بله؛ اونجا باید داخل اون map که نوشتی از button استفاده بکنی

الان همون کامپوننت Button رو داری داخل map استفاده میکنی

مجتبی سوری ۱۸ اردیبهشت ۱۴۰۱، ۱۸:۳۳

سلام بله می‌خواهم با استفاده از دستور map و props

اون ورودی‌های که از component model به component buttons پاس بدهم تا برای من button رندر کند

این جمله را متوجه نمیشم

*اگر بله؛ اونجا باید داخل اون map که نوشتی از button استفاده بکنی*

کدوم قسمت از map ای که نوشتم باید button باشد؟

mohammad dadkhah ۱۹ اردیبهشت ۱۴۰۱، ۰۳:۵۲

کدی که شما نوشتی این

const buttons = props.btns.map((item) => {
    return <Button id={item.id}>{item.title}Button>
})

اینجا از Button استفاده کردی (به اون B بزرگ اولش توجه بکن) که در واقع از همین کامپوننت Button که نوشتی داری استفاده میکنی و باید اون رو به این کد تغییر بدی:

const buttons = props.btns.map((item) => {
    return <button id={item.id}>{item.title}
})

اگر اون ارورها رو توجه بکنی گفته که props.btns مقدارش undefined اون هم به این دلیل که داخل این map که نوشتی از کامپوننت Button استفاده کردی و بهش btns رو پاس ندادی

بهترین پاسخ

مجتبی سوری ۱۹ اردیبهشت ۱۴۰۱، ۰۵:۲۲