常連

注目の的

社会貢献

質問力

支持者

mainDataとgroupDataの配列を組み合わせてnewDataのような配列を作成したいです。
下記のように実装してみたのですが以下のエラーが発生しnewDataのような配列を作成できません。
わかる人いましたらご教授お願いしたいです。

```
error
TypeError: Cannot set properties of undefined (setting 'type')
'item' is never reassigned. Use 'const' instead.eslint
```

```
 const mainData = [
    { id: 1, name: 'aaa' },
    { id: 2, name: 'bbb'},
    { id: 3, name: 'ccc' },
    { id: 4, name: 'ddd' },
  ];

  const groupData = [
    { id: 1, type: 1, groupId: 1, context: 'test' },
    { id: 2, type: 2, groupId: 1, context: 'txt' },
    { id: 3, type: 3, groupId: 1, context: 'hoge' },
    { id: 4, type: 1, groupId: 1, context: 'hoge' },
    { id: 5, type: 2, groupId: 1, context: 'test' },
    { id: 6, type: 2, groupId: 2, context: 'test' },
    { id: 7, type: 1, groupId: 3, context: 'test' },
    { id: 8, type: 1, groupId: 3, context: 'test' },
    { id: 9, type: 1, groupId: 4, context: 'test' },
  ];

const newData = [
  {
    id: 1,
    name: 'aaa',
    content: [
      { type: 1, context: 'test' },
      { type: 2, context: 'txt' },
      { type: 3, context: 'hoge' },
      { type: 1, context: 'hoge' },
      { type: 2, context: 'test' },
    ],
  },
  {
    id: 2,
    name: 'bbb',
    content: [{ type: 2, context: 'test' }],
  },
  {
    id: 3,
    name: 'ccc',
    content: [
      {  type: 1, context: 'test' },
      {  type: 1, context: 'test' },
    ],
  },
  {
    id: 4,
    name: 'ddd',
    content: [{  type: 1, context: 'test' }],
  },
];
```
```
        type NewDataType = {
          id: number;
          name: string;
          content: Content[];
        };
        type Content = {
          type: number;
          content: string;
        };
        mainData.map(m => {
          const blocks: NewDataType[] = [];
          groupData.map(g => {
            const sameGroups = groupData.filter(i => i.groupId === m.id);
            let item: Content[] = [];

            if (sameGroups) {
              sameGroups.map((i, index) => {
                item[index].type = i.type;
                item[index].content = i.context;
              });
            }
            blocks.push({
              id: m.id,
              name: m.name,
              content: item,
            });
          });
        });
```

typescript 配列と配列を組み合わせて新しい配列を作成したい

react-chart-2を使っています。
y軸の値を最小値が0,最大値を100としたいです。
今だとdataの値に合わせてy軸が決められてしまいます。
どうやってy軸の値をカスタマイズすることができるのでしょうか？

[codeはこちらにあります](https://codesandbox.io/s/suspicious-frost-19qv9?file=/src/App.tsx)

react-chart-2のy軸の表示域を調節したい

### 前提・実現したいこと
丸ボタンを押したときにBoxが右に移動して画面から消えます。
罰ボタンを押した時に左にBoxが動いて画面から消えます。
cardの配列cardsをmapで回して表示しています。
ボタンを押下した時に最前面のBoxだけ移動したいのですが、なぜか後ろのBoxも移動してしまいます。
cardsの配列のlenghtは３なので３回ボタンを押下したらBoxがなくなるはずですが、２回押下したタイミングで画面からBoxが全部消えてしまいます。どうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。
よろしくお願いします。




### 補足情報（FW/ツールのバージョンなど）
react
scss
Typescript
framer-motion

react buttonを押下した後のBoxのアニメーションが複数回行われる。

下記のonClickEditの処理でstateに引数で渡ってきたidとisEditをtrueにしたいのですがエラーになってしまいます。
どう修正したらいいのでしょうか？

```ここに言語を入力
// エラー内容
型 '{ savedSearch: { id: number; isEdit: boolean; }; length: number; toString(): string; toLocaleString(): string; pop(): ISavedSearch; push(...items: ISavedSearch[]): number; ... 28 more ...; flat<A, D extends number = 1>(this: A, depth?: D): FlatArray<...>[]; }' の引数を型 'SetStateAction<ISavedSearch[]>' のパラメーターに割り当てることはできません。
  オブジェクト リテラルは既知のプロパティのみ指定できます。'savedSearch' は型 'SetStateAction<ISavedSearch[]>' に存在しません。ts(2345)
```


```ここに言語を入力
interface ISavedList {
  savedSearch: {id:number ,save: { isEdit: boolean, name: string}}
}

export const SaveListCard: FunctionComponent<Props> = () => {
  const [state, setState] = useState<ISavedList[]>();
  const onClickEdit  = (id; number ) => {
    setState({...state, savedList: { id:id,  isEdit: true}})
  }

  );
};

```

react　　オブジェクトのstateの変更

cssでsidebarを作成しています。
hover前は画像だけで、hoverされたら画像とテキストを表示します。
hoverされたら画像とテキストは表示されるのですが、アニメーションの途中でテキストが曲がって表示されてしまいます。
どう修正したらいいでしょうか？
https://codepen.io/ka11taniya/pen/RwRYRdV

css hoverされた時のテキストの表示

### 前提・実現したいこと
useRefを使用してclassNameのボックスの位置を取得し、divと同じ位置にCardを表示したいです。
useRefを使用してdivの位置を取得したいのですがどのようにしたらいいのでしょうか？

どのように実装すればよいですか？
### 該当のソースコード

```ここに言語を入力
const Index: FunctionComponent = () => {
  const cardRef = useRef<HTMLDivElement>(null);
  const Click = () => {};
  return (
    <>
      <Card height={100} width={200}>
        Card
      </Card>
      <div style={{ height: '150px' }}></div>
      <div className="box"ref={cardRef} onClick={() => Click()}>

      </div>
    </>
  );
};
```
```

useRefを使って位置を取得したい

https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc

上記のサイトを参考にして自動で高さが変わるtextareaを作りました。
①のコードのスタイルをstyled-componentsでスタイルするように②のコードに直しました。
しかしstyled-componentsに直したらtextareaに入力しても何も入力されず、、、
デベロッパーツールで見てみましたがエラーの表記も出ていませんでした。

どこが原因で動かないのかがわからないのでわかる人いましたら教えて欲しいです。
よろしくお願いします。


//①
```ここに言語を入力
import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

const TextAreaA = styled.textarea`
  width: 100%;
  resize: none;
  ::-webkit-resizer {
    display: none;
  }
`;

export const TextArea: FunctionComponent = () => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  const [text, setText] = useState('');
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [parentHeight, setParentHeight] = useState('auto');

  useEffect(() => {
    setParentHeight(`${textAreaRef.current!.scrollHeight}px`);
    setTextAreaHeight(`${textAreaRef.current!.scrollHeight}px`);
  }, [text]);

  const onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTextAreaHeight('auto');
    console.log(textAreaHeight);
    // console.log(parentHeight);
    setParentHeight(`${textAreaRef.current!.scrollHeight}px`);
    setText(event.target.value);

    // if (props.onChange) {
    //   props.onChange(event);
    // }
  };

  return (
    <div
      style={{
        paddingTop: '12px',
        paddingBottom: '12px',
        paddingLeft: '12px',
        paddingRight: '12px',
        maxHeight: '208px',
        minHeight: parentHeight,
        height: '28px',
        background: '#E1E6ED',
      }}
    >
      <TextAreaA
        // {...props}
        ref={textAreaRef}
        rows={1}
        style={{
          height: textAreaHeight,
        }}
        onChange={onChangeHandler}
      />
    </div>
  );
};
```

//②

```ここに言語を入力
import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

type TArea = {
  parent: number;
  text: number;
};
const TextAreaStyle = styled.div<TArea>`
  padding: 12px 12px;
  height: 28px;
  border-radius: 24px;
  max-height: 208px;
  min-height: ${({ parent }: TArea) => parent}px;
  textarea {
    width: 100%;
    resize: none;
    height: ${({ text }: TArea) => text}px;
    display: none;
    ::-webkit-resizer {
      display: none;
    }
  }
`;

export const TextArea: FunctionComponent = () => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  const [text, setText] = useState('');
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [parentHeight, setParentHeight] = useState('auto');

  useEffect(() => {
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    setTextAreaHeight(`${textAreaRef.current!.scrollHeight}`);
  }, [text]);

  const onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTextAreaHeight('auto');
    console.log(textAreaHeight);
    console.log(parentHeight);
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    setText(event.target.value);

    // if (props.onChange) {
    //   props.onChange(event);
    // }
  };

  return (
    <TextAreaStyle parent={Number(parentHeight)} text={Number(textAreaHeight)}>
      <textarea
        // {...props}
        ref={textAreaRef}
        rows={1}
        onChange={onChangeHandler}
      />
    </TextAreaStyle>
  );
};

```

textarea 動かない

開発環境はreact.js, typescript, next.js, styled-componentsを使っています。


セレクトボックスのコードは以下になります。
https://codesandbox.io/s/q289304-t4z0w?file=/src/SelectDate.tsx


上記のコードのSelectDateの下にdivタグを用意してSelectDateのプルダウンを表示するとdivタグの上にプルダウンが重ならず下にずれてしまいます。SelectDateにz-indexをつけましたが前面に表示されませんでした。
プルダウンが前面に表示されるにはどうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。

```ここに言語を入力
<SelectDate>//省略</SlelectDate>
<div>テスト</div>
```

react セレクトボックスのプルダウンを前面に表示するようにしたい

開発環境
Typescript + vue.js + nuxt.jsを使用しています。

userページからuser/selectページに移動した時に①の値を渡したいのですが値を渡すことはできるのでしょうか？
わかる人いましたらご教授お願いしたいです。

```ここに言語を入力
//渡したい値
this.users

// this.usersの中身
id = 0
name = "あああ"
group = "A"
```



```ここに言語を入力

  onClickConfirmButton() {
    this.$router.push({ path: this.DetailUrl() })
  }

  DetailUrl() {
    return `/user/select`
  }
```

Vue.js 違うpageに値を渡したい

onClickButtonの引数にapplyを渡しており、その引数を this.onPostSuccess(res.ogp_url, res.code, title, apply)で渡したいのですがthis.onPostSuccessのところでCannot find name 'apply'となってしまいます。
わかる人がいましたら教えて欲しいです！
```ここに言語を入力
 onClickButton(apply: Apply) {
    this.isPosting = true
    const postTitle: string = this.title
    const postDescription: string = this.description
    this.postData(
      postTitle,
      postDescription,
  }
  postData(
    title: string,
    body: string
  ) {
    const promise = PostDataSource.postOffer(
      this.$axios,
      authStore.userId,
      title,
      body,
    )
    promise
      .then((res) => {
          this.onPostSuccess(res.ogp_url, res.code, title, apply)
      })
      .catch((err) => {
        this.onPostFail(err)
      })
  }
```