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 
    })
  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

نیکدل پیوندی ۱۶ اردیبهشت ۱۴۰۱، ۰۹:۴۸

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

نیکدل پیوندی ۱۶ اردیبهشت ۱۴۰۱، ۰۹:۵۱

نیکدل پیوندی ۱۶ اردیبهشت ۱۴۰۱، ۱۰:۲۵

سلام

با توجه به عکس هایی که فرستادید چیزی که برداشت کردم مشکل از این هست که اون کامپوننت 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 گذاشتید اختیاری است؟ و دوم این که حالا چرا داخل پرانتز گذاشتید؟

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

نیکدل پیوندی ۱۷ اردیبهشت ۱۴۰۱، ۱۳:۲۶

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

 return {item.title};

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

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

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

نیکدل پیوندی ۱۷ اردیبهشت ۱۴۰۱، ۱۳:۳۲

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

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

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

ارژن معارف ۱۸ اردیبهشت ۱۴۰۱، ۰۵:۴۰

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

و

و

و

نیکدل پیوندی ۱۸ اردیبهشت ۱۴۰۱، ۱۸:۰۱

نیکدل پیوندی ۱۸ اردیبهشت ۱۴۰۱، ۱۸:۰۲

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

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

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

ارژن معارف ۱۸ اردیبهشت ۱۴۰۱، ۱۸:۳۳

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

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

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

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

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

نیکدل پیوندی ۱۹ اردیبهشت ۱۴۰۱، ۰۳:۵۲

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

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 رو پاس ندادی

بهترین پاسخ

ارژن معارف ۱۹ اردیبهشت ۱۴۰۱، ۰۵:۲۲