自動化無しに生活無し

インストール npm install @fullcalendar/react @fullcalendar/daygrid ソースコード import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import { useState, useEffect } from 'react'; const App = () => { const [events, setEvents] = useState([]); useEffect( () => { setEvents([ { title: 'event 1', date: '2024-12-01' }, { title: 'event 2', date: '2024-12-02' } ]); }, []); // FullCalendarに events 引数を与える。Stateで管理する。 return ( <main> <div className="container"> <FullCalendar plugins={[ dayGridPlugin ]} initialView="dayGridMonth" locale="local" events={events} /> </div> </main> ) } export default App; 考察 今回は、useEffectでイベントを取得したが、実践ではfullcalendar.jsのeventSourceを使うほうが良いだろう。 なぜなら、useEffec ...

textarea要素には、valueプロパティを使って値を与える 普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。 しかし、Reactで同じことをやるとエラーになる。 <textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea> そこで、valueプロパティを使う。 <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea> これで、 Use the `defaultValue` or `value` props instead of setting children on <textarea>. というエラーは解決される。 リスト内の要素を識別できるよう、keyプロパティを与える Each child in a list should have a unique ...